Vue.jsでダイアログ

html

<div id="app">
  {{ message }}
<button v-on:click="openDialog">ボタン</button>
</div>

Javascript

※ダイアログを表示するが、消す処理は入れてない

// ダイアログ用のVueのサブクラス作成
let dialog = Vue.extend({
  template: '<div>ダイアログ</div>'
});


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    openDialog: function () {
      // ダイアログ用のvueインスタンスを作成(el要素が無いためアンマウント状態)
      let daialogInstance = new dialog();
      // ダイアログ用のインスタンスをマウント
      let daialog = daialogInstance.$mount();
      // ダイアログの要素を#appの要素内にappendする
      this.$el.appendChild(daialog.$el);
    }
  }
});

CodePen:https://codepen.io/hukuzatsu/pen/ZEEZVjO?editors=1111
参考：https://kitak.hatenablog.jp/category/Vue?page=1493443912