テンプレート参照により、Vue の宣言的モデルではカバーされない何か命令的な操作が必要な場合に、実際の DOM 要素（または子コンポーネントのインスタンス）への直接参照を取得できます。例えば、input をフォーカスする、要素を測定する、子のメソッドを呼び出すなどです。
DOM 要素へのアクセス
vue
<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>
パターン： を宣言し、要素に で設定し、マウント後に が実際の DOM ノードになります。マウント前は なので、setup 中ではなく （またはそれ以降）でアクセスしてください。