[Vue/Nuxt]client-onlyのコンポーネントはrefで取得できない

client-onlyはSSRさせるアプリケーションにおいて、SSRさせずにクライアント側で展開させたい場合に使うタグです。

<template>
  <div>
    <client-only>
      no-ssr
    </client-only>
    <p>ssr</p>
  </div>
</template>

このclient-only内に展開したコンポーネントをrefで取得するケースで、まず通常の取得ケースは以下のようになります。

<template>
  <div>
    <client-only>
      <my-component ref="myComponentRef" />
    </client-only>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const myComponentRef = ref(null)
    onMounted(() => {
      console.log(myComponentRef.value)
    })
    return { myComponentRef }
  }
}
</script>

refで空の変数を用意しておいて、テンプレートのrefに代入、onMounted後であればVue v2のthis.$refsの様にスクリプト内でコンポーネントにアクセスできます。
ですが、client-only内に展開したコンポーネントではこの方法ではアクセスできません。
このコードを実行するとmyComponentRef.valueはnullとなります。

nextTickを使う

この場合はnextTickを利用すると解決できます。

<script>
import { ref, onMounted, nextTick } from 'vue'

export default {
  setup() {
    const myComponentRef = ref(null)
    onMounted(() => {
      nextTick(() => {
        console.log(myComponentRef.value)
      })
    })
    return { myComponentRef }
  }
}
</script>

おわり