How do template refs give access to DOM elements or child components?

Template refs let you get a direct reference to a real DOM element (or a child component instance) when you need to do something imperative that Vue's declarative model doesn't cover — like focusing an input, measuring an element, or calling a child's method.

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>

The pattern: declare a , attach it via on the element, and after mount, is the actual DOM node. It's before mounting, so access it in (or later), not during setup.