【解決】Vuetify3でv-dialogが機能しない。Boolean型変数をRefで囲む（Vue3 Composition API）

今回は、Vuetify3でダイアログコンポーネントのv-dialogが機能しないときの解決方法を記します。
v-dialogが機能しないとは具体的に、OpenDialogボタンを押した際に開かない・
初期表示時になぜか表示されてしまう/表示されないという事象です。

本記事については、公式ドキュメントのサンプルをコピペすると実装できるが
Vue3のComposition APIを使った際に機能しなくなる場合に解決できます。

v-dialogが表示されないコード
- エラー
解決
- 初めからダイアログが表示され続ける/表示されない
おわりに

v-dialogが表示されないコード

<template>
 <div class="text-center">
  <v-dialog v-model="dialog" width="auto" >
    <template v-slot:activator="{ props }">
  <v-btn color="primary" v-bind="props" >
   Open Dialog
  </v-btn>
 </template>
 <v-card>
  <v-card-text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </v-card-text>
  <v-card-actions>
   <v-btn color="primary" block @click="dialog = false">
   Close Dialog
  </v-btn>
 </v-card-actions>
 </v-card>
</v-dialog>
</div>
</template>

エラー

下の警告がコンソールで上がっていました。
そのままの意味ですが、エラーではなく、警告で表示されていて
他のログに埋もれていました。。

Invalid prop: type check failed for prop "XX". Expected Boolean, got Object 
at...

解決

boolean型の変数のdialogに「.value」をつけました。

<v-dialog v-model="dialog.value" width="auto" >

<v-btn color="primary" block @click="dialog.value = false">

refを使用すると変数がリアクティブになります。
refで囲うと変数がオブジェクト内に存在する訳ですが、「value」を
省略できます。ただし、Booleanは例外だそうで明示的に「value」を付けなければいけません。

煩わしさがあるため、reactiveを推奨する声もあります。
reactiveだと一貫性があるので本記事のようなトラブルは避けられますね。

Vue 3 Composition API: ref() vs. reactive()

Learn when to use ref() and when to use reactive() and why you should consider always using ref() instead of reactive().

初めからダイアログが表示され続ける/表示されない

これも同様の原因ですね。

Boolean のプロパティは、値が指定されないと false に変換されます。これは default を設定すると変更できます。例えば default: undefined とすると、非真偽値のプロパティとして振る舞います。

Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org