Como as referências de template dão acesso aos elementos DOM ou componentes filhos?

Referências de template permitem que você obtenha uma referência direta a um elemento DOM real (ou uma instância de componente filho) quando você precisa fazer algo imperativo que o modelo declarativo do Vue não cobre — como focar uma entrada, medir um elemento ou chamar um método de um filho.

Accessing a DOM element

<script setup>
import { ref, onMounted } from "vue";

const inputEl = ref(null);   // 1. create a ref (initially null)

onMounted(() => {
  inputEl.value.focus();      // 3. after mount, .value is the DOM element
});
</script>

<template>
  <input ref="inputEl" />     <!-- 2. ref attribute name matches the variable -->
</template>

O padrão: declare um , anexe-o via no elemento e após a montagem, é o nó DOM real. É antes da montagem, portanto, acesse-o em (ou depois), não durante a configuração.