なぜ、モーダルが必要か？
モーダル（ダイアログ）は業務アプリで必ず使いますよね。ですが、経験上、案件によってその実装方法はバラバラだったりします。Vue.jsでモーダルを実現する方法をいくつか解説します。
業務アプリで必ず使うのですが、
1.Vue.js+Bootstrap Modalを使う
業務アプリのCSSはBootstrapがベースになっているのが多いですね。
https://getbootstrap.jp/docs/4.2/components/modal/
上記がBootstrap モーダルです。
こちらのサンプルをもとに、モーダルをコンポーネント化して、どのコンポーネントからでもモーダルを呼び出せるようにしましょう。
ポイント１ モーダルをコンポーネント化
ポイント２ モーダルを呼び出す（表示する）
呼び出し元コンポーネントの任意のメソッドから、$refを使ってモーダルコンポーネントのshow()メソッドを呼びましょう。
もしくは、呼び出し元コンポーネントの任意のメソッドから、$("モーダルのセレクタ").modal("show")でモーダルを表示することもできます。
ポイント３ モーダルから値を受け取る
モーダルから値を受け取るには、$emitを使うのが基本です。モーダルと言っても、子コンポーネント→親コンポーネントへの値の受け渡しなので、$emitを使うのが適切です。
重要
Promiseを返すようにしよう！そうすると、メソッドの中でチェーンできて非常に便利になります。
2.Vue.jsのプラグインvue-js-dialogを使う
確認ダイアログやアラートを簡単に作れるのがvue-js-dialogというプラグインです。実案件でも導入した実績があります。
確認ダイアログやアラートのために、HTMLをわざわざ書きたくない。確認ダイアログを2つ3つと連結させる必要があるときにとても便利です。