ComponentWithModal.vue

<script>
import UseModal from './shared/modal/UseModalMixin.js';

export default {
  mixins: [UseModal],
};
</script>

<template>
  <modal size="md" v-ref:modal>
    <h3 slot="header">
      <strong>TITLE</strong>
    </h3>
    
    <div>
    CONTENT
    </div>
    
    <div slot="footer">
      <button @click="close()" class="btn btn-default" type="button">Cancelar</button>
      <button @click="save()" :disabled="!$form.valid" class="btn btn-danger" type="button">Salvar</button>
    </div>
  </modal>
</template>

<style>

</style>

Modal.vue

<script>
const INSTANCE = {};

export default {
  data() {
    const instance = Symbol('modal');
    return { instance };
  },
  ready() {
    INSTANCE[this.instance] = jQuery(this.$els.modal);
    INSTANCE[this.instance].modal({ show: this.auto });
  },
  beforeDestroy() {
    INSTANCE[this.instance].data('bs.modal', null);
    delete INSTANCE[this.instance];
  },
  events: {
    'call:show'() {
      this.open();
    },
    'call:close'() {
      this.close();
    },
  },
  methods: {
    open() {
      INSTANCE[this.instance].modal('show');
    },
    close() {
      INSTANCE[this.instance].modal('hide');
    },
  },
  computed: {
    modalDialogClass() {
      const size = this.size;
      return {
        [`modal-${size}`]: size !== 'wide',
      };
    },
  },
  props: {
    auto: {
      default: false,
    },
    size: {
      default: 'lg',
    },
  },
};
</script>

<template>
  <div class="modal fade" :class="{'modal-wide': size == 'wide'}" v-el:modal tabindex="-1" role="dialog">
    <div class="modal-dialog" :class="modalDialogClass" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  @click="close"
                  aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <slot name="header"></slot>
        </div>
        <div class="modal-body"><slot></slot></div>
        <div class="modal-footer"><slot name="footer"></slot></div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</template>

<style scoped>
  .modal.modal-wide .modal-dialog {
    width: 90%;
  }
  .modal-wide .modal-body {
    overflow-y: auto;
  }
</style>

UseModalMixin.js

import Modal from './Modal.vue';

export default {
  $modal: 'modal',
  components: { Modal },
  methods: {
    getModal() {
      return this.$refs[this.$options.$modal];
    },
    open() {
      this.getModal().open();
      this.$emit('open');
    },
    close() {
      this.getModal().close();
      this.$emit('close');
    },
  },
};