Nuxt3/Vue3: Composition APIでのテンプレート参照(`$refs`)

Nuxt3で$refsを使うと思ったら、うまくいかなかった。。
Composition APIで$refsは使えないらしい。。

Composition APIでのテンプレート参照したいときは、
refと同じ変数をRefを使って用意すればよいらしい。

• テンプレート参照 | Vue.js

<script setup>
const myCoolDiv = ref(null)

const clickMe = () => console.log(myCoolDiv)
</script>

<template>
  <button @click="clickMe">show me the ref</button>
  <div ref="myCoolDiv">hello there</div>
</template>

また、カスタムコンポーネント内の関数などを呼びたいときは、
defineExposeを使って、明示的に公開する必要がある。

• defineExpose | SFC <script setup> | Vue.js

以上!!

参考にしたサイト様

• vue.js - How to use template refs in Nuxt 3 - Stack Overflow
• テンプレート参照 | Vue.js
• SFC <script setup> | Vue.js