v-dialogのダイアログが開かない。

Question

発生している問題

v-dialogを初めて使ってみたのですが、以下のソースコードを打って入力したところ、
dark themeのボタンしか表示されなく、押してもダイアログが出てきません。
何か解決策や問題点があれば教えていただきたいです。

よろしくお願い致します。

該当のソースコード

<template>
  <div class="text-center">
    <v-dialog dark v-model="dialog" max-width="500">
        <template #activator="{ on }">
            <v-btn v-on="on">dark theme</v-btn>
        </template>
        <v-card>
            <v-card-title class="headline">
                Dialog Title
            </v-card-title>
            <v-card-subtitle>model:[{{ dialog }}]</v-card-subtitle>
            <v-card-text>
                <div class="body-1">card text. card text. card text. card text. card text.</div>
                <div class="body-2">
                    card text. card text. card text. card text. card text. card text. card text. card text. card text.
                </div>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" outlined @click="dialog = false">
                    Close
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false,
      }
    },
  }
</script>

Answer 1

自己解決することができました。