モーダル

ライブラリではなく、自作モーダル

テンプレート　html

 <div id="overlay" v-if="showContent" v-on:click="closeModal">
	<div id="modal" v-on:click="stopEvent">
		<h3 class="title center" v-bind:class="list.class">{{list.title}}</h3>		
<div class="right"><i class="material-icons" v-on:click="closeModal">close</i></div>
	</div>
</div>

js

  methods:{
    openModal: function(num, time, edit){
      this.showContent = true;
      var target = this.datalists;
      this.list = target[num];
},
    closeModal: function(){
      this.showContent = false;
},
    stopEvent: function(){
      event.stopPropagation()
    },

CSS

#overlay{
  z-index:1;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);

  display: flex;
  align-items: center;
  justify-content: center;
}
#modal{
  z-index:2;
  width:50%;
  padding: 1em;
  background:#fff;
	border-radius: 5px;
}
#modal i{
	cursor: pointer;
}