VueJS Bootstrap Modal

Modal.vue

<template>
  <div class="modal" :class="{'show': show}">
    <div class="modal-content">
      <div class="header p-5">
        <div class="row">
          <div class="col-sm-10">
            <h3 class="modal-title mt-0">Modal Header</h3>
          </div>
          <div class="col-sm-2 text-right">
            <button class="h-100 bg-transparent border-0 text-white" @click="closeModal">
              <span class="mdi mdi-close"></span>
            </button>
          </div>
        </div>
      </div>
      <div class="modal-body pt-3">
        <!-- modal body content -->
      </div>
			<div class="footer mt-3">
          <div class="float-right">
            <button class="btn btn-secondary btn-xl modal-close" type="button" data-dismiss="modal">Cancel</button>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Modal',
    data () {
      return {
        show: false,
        data: {}
      }
    },
    created () {
      // listen for gobal event 'open-moddal'
      this.$eventHub.$on('open-modal', this.openModal) 
    },
    methods: {
      openModal (payload) {
        this.data = payload.data
        document.getElementsByTagName('body')[0].classList.add("modal-open")
	this.show = true
      },
      closeModal () {
        this.show = false
        document.getElementsByTagName('body')[0].classList.remove("modal-open")
        this.component = {}
        this.type = ''
      }
    }
  }
</script>

<style type="text/css" lang="scss" scoped>

  .modal {
    border-radius: 0;
    display: block;
    opacity: 0;
    top: 0px;
    z-index: -5;
    .header {
      background-color: #3290CF;
      color: #ffffff;
      border-radius: 0;
      button {
        font-size: 20px;
      }
    }
    &:before {
      content: '<div></div>';
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #000000;
      opacity: 0.6;
    }
    transition-property: opacity, z-index, top;
    transition-delay: 0ms, 300ms, 0ms;
    transition-duration: 300ms, 0ms, 300ms;
    .footer{

    }
  }

  .modal.show {
    z-index: 9999;
    opacity: 1;
    top: 60px;
    transition-property: opacity, z-index, top;
    transition-delay: 100ms, 0ms, 100ms;
    transition-duration: 300ms, 0ms, 300ms;
  }
</style>