Nuxt(Vue) Composition APIでthis.$refsにアクセス

はじめに

現在プロジェクトでNuxt(2系) × Composition API × VeeValidate(3系)で開発をしているのですが
その時に少しだけハマったものをメモがてらアウトプットしようと思います。
前提としてフォームのバリデーションにはVeeValidate(3系)を使用しています。

this.$refsにどうアクセスするのか？

例えば、よく管理系の画面を作る際に、フォーム入力が終わり送信した後で、
フォームを初期化したい時があります。
その際に画面遷移などで次のアクションがあれば問題ないのですが、モーダルを出したり
同じ画面内でアクションを促す場合は、

this.$refs.observer.reset()

を実行して初期化する必要が出てくると思います。VueのOption APIなどであれば
this.$refsでアクセスできるのですが、Composition APIだとそもそもthisに
アクセスできないので別の方法でアクセスする必要があります。

ではどうやればアクセスできるのか？
それは以下のようにすることでアクセスすることができます。

バリデーション部分はref="observer"を指定

<ValidationObserver ref="observer">

Composition API部分ではsetup関数内に、refと記述し
observer.value.reset()を実行することで、Option APIの
this.$refs.observer.reset()と同様の動作をすることができる。

setup() {
    const observer = ref(null)

    const init = () => {
      observer.value.reset()
    }

    return {
      observer,
      init
    }
  },

まとめ

Composition APIでthisの呪縛などが無くなり、Vueも処理をまとめやすくなりましたが、
こういった細かい所には注意が必要ですね。中々記事も少ないのでアウトプットしました〜！
誰かの助けになれば幸いです！参考になった方はLGTM押してくれると嬉しいです！