Modal

modal.vue

<template>

  <div :class="{ 'is-active': show, 'modal': true }">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">{{title}}</p>
        <button
          class="delete"
          aria-label="close"
          @click="onClose()"
          v-show="closeIsVisible"
        ></button>
      </header>
      <section class="modal-card-body">
        <div class="content-area">
          <component
            :is="component"
            ref="child"
            v-show="component !== null"
          />
        </div>
      </section>
      <footer class="modal-card-foot buttons is-right">
        <button
          :class="['button', action.class]"
          v-for="action in visibleActions"
          :key="action.binder"
          @click="action.functionRef()"
        >{{action.name}}</button>
      </footer>
    </div>
  </div>

</template>

<script>
//import Vue from 'vue';

export default {
  data() {
    return {
      show: false,
      component: null,
      cacheComponentInitialData: [],
      cacheComponent: [],
      title: "",
      data: null,
      actions: [
        ...
      ]
    };
  },
  computed: {
    visibleActions() {
      return this.actions.filter(x => x.visible);
    },
    closeIsVisible() {
      return (
        this.actions.filter(x => x.visible && x.binder === "onClose").length > 0
      );
    }
  },
  mounted() {},
  created() {
    this.$root.$on(
      "show-modal",
      (component = "missing component", title = "missing title", data = {}) => {
        if (component === "") {
          console.warn("Missing modal component");
          return;
        }

        if (!component.name) {
          console.warn("Modal component must be named");
          return;
        }

        if (title === "" || (!data && !data.title)) {
          console.warn("Missing modal title");
          return;
        }

        let componentData  = Object.assign({}, component.data(), data);

        this.show = true;
        this.title = title || data.title;
        this.data = data;

        // works but can't be updated after the initial set
        // component.data = () => componentData;
        this.component = component;
      }
    );
  },
  methods: {
    ...
  }
};
</script>

<style lang="scss" scoped>
...
</style>