Edit in JSFiddle

Vue.component('modal', {
	template: `
  <div>
    <div class="modal">  
      <div>
        <div class="modal-header">
            <slot name="header"></slot>
        </div>
        <div class="modal-body">
            <slot name="body"></slot>
        </div>
        <div class="modal-footer">
            <slot name="footer"></slot>
            <slot>Olá, eu funciono como um "catch"!</slot>
        </div>
      </div>
    </div>
    <div class="modal-background"></div>
  </div>`
});

new Vue({
	el: "#app",
  data: {
  	showModal1: false,
  	showModal2: false,
  	showModal3: false,
  },
  methods: {
    closeAllModals() {
      this.showModal1 = false;
      this.showModal2 = false;
      this.showModal3 = false;
    },
    openModal(modal) {
    	if(modal === 1)
        this.showModal1 = true;
    	else if(modal === 2)
        this.showModal2 = true;
    	else
        this.showModal3 = true;
    },
    toggleModal(modal) {
	    this.closeAllModals();
      this.openModal(+modal);
    },
  },
});
<div class="" id="app">
<button @click="toggleModal(1)">Toggle Modal 1</button>
<button @click="toggleModal(2)">Toggle Modal 2</button>
<button @click="toggleModal(3)">Toggle Modal 3</button>
  <modal v-show="showModal1"></modal>
  <modal v-show="showModal2">
    <div slot="header"> Eu sou um header </div>
    <div slot="body"> Eu sou um body </div>
  </modal>
  <modal v-show="showModal3">
    <div slot="header"> Eu sou um header </div>
    <div slot="body"> Eu sou um body </div>
    <div slot="footer"> Eu sou um footer (nao tem catch desta vez). </div>
  </modal>
</div>
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  margin: 20% 33.333%;
  width: 300px;
  height: 300px;
  background: #fff;
  border-radius: 5px;
  z-index: 100;
}

.modal-background {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.modal-wrapper {
  display: block;
}