Доступ к элементу через $ref in vue3?

При использовании "нового" Composition API, рефы на элементы шаблона в коде становятся доступны после монтирования компонента и первичного рендеринга разметки (а именно - начиная с onMounted).
Vue автоматически присваивает ссылки на элементы ref-переменным, при совпадении имен (см. ниже, это проще понять увидев код).

Общий паттерн использования рефа элемента, имеет следующий вид:

<div ref="foo">...</div>

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const foo = ref(null);  // объявляем реф (с начальным значением null)
    // в setup, данный реф и будет иметь значение null - т.к. код setup выполняется синхронно, а замена значения произойдет ПОЗЖЕ, при первом рендеринге

    onMounted(() => {
      // тут Vue уже присвоила рефу новое значение (ссылку на DOM-объект), потому что имя рефа элемента совпало с именем рефа возвращенного из setup
      console.log('Вот объект нашего элемента из рефа:', foo.value);
    });
    return {
      foo,    // обязательно добавляем в возвращаемый из setup объект, делая данный реф доступным для использования
    };
  },
};

То есть, общий принцип: указываем реф в шаблоне, атрибутом элемента ? в setup объявляем реф с тем же именем ? возвращаем его в составе результирующего объекта (конечно, тоже в одноименном свойстве).

При использовании рендер-функции вместо шаблона - реф элемента указывается в объекте параметров (свойство ref), то есть:

render: h => h('div', { ref: 'foo' })

Более подробно изложено в оф. документации Vue 3.