¿Cómo te dan acceso los template refs a los elementos DOM o a los componentes secundarios?

Los template refs te permiten obtener una referencia directa a un elemento DOM real (o a una instancia de un componente secundario) cuando necesitas hacer algo imperativo que el modelo declarativo de Vue no cubre — como enfocar una entrada, medir un elemento o llamar a un método del componente secundario.

Acceso a un elemento DOM

<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>

El patrón: declara , adjúntalo mediante en el elemento, y después del montaje, es el nodo DOM real. Es antes del montaje, así que accede a él en (o más tarde), no durante setup.