Vue.js で同期的なダイアログ表示を行う

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-btn elevation="2" @click.stop="onClick">Show Alert</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { confirm } from "./AsyncDialog.vue";

@Component
export default class HelloWorld extends Vue {
  onClick(): void {
    (async () => {
      const answer = await confirm("実行します。よろしいですか？");
      console.log(`answer: ${answer}`);
    })();
  }
}
</script>

<template>
  <v-dialog v-model="dialog" width="500" @click:outside="cancel">
    <v-card>
      <v-card-text class="pa-4">
        {{ message }}
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="ok"> OK </v-btn>
        <v-btn @click="cancel"> キャンセル </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import Vue from "vue";
import vuetify from "@/plugins/vuetify";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";

@Component
export default class AsyncDialog extends Vue {
  @Prop({ required: true }) message!: string;
  @Prop({ required: true }) okAction!: () => void;
  @Prop({ required: true }) cancelAction!: () => void;

  dialog = false;

  ok(): void {
    this.okAction();
    this.close();
  }
  cancel(): void {
    this.cancelAction();
    this.close();
  }

  created(): void {
    this.$mount();
    document.body.appendChild(this.$el);
    this.dialog = true;
  }
  close(): void {
    this.dialog = false;
    setTimeout(() => {
      if (document.body.contains(this.$el)) document.body.removeChild(this.$el);
      this.$destroy();
    }, 200);
  }
}

export const confirm = async (message: string): Promise<boolean> => {
  return new Promise<boolean>((resolve) => {
    const VM = Vue.extend(AsyncDialog);
    new VM({
      vuetify,
      parent: this,
      propsData: {
        message,
        okAction: () => resolve(true),
        cancelAction: () => resolve(false),
      },
    });
  }).catch((err) => {
    throw err;
  });
};
</script>