To use a b-modal (buefy) as child component managed from parent component on VUE 2

If you need to create a child component that has a b-model which will be managed from parent component, you have to wirte it as:

Child Component

This component has the b-modal and receives the prop bool show to control their visibility. Moreover, this will emit an event when the modal is closed:

<template>
  <b-modal :active.sync="localShow" has-modal-card @close="closeModal">
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal Hijo</p>
      </header>
      <section class="modal-card-body">
        <p>Contenido del modal</p>
      </section>
      <footer class="modal-card-foot">
        <b-button @click="closeModal">Cerrar</b-button>
      </footer>
    </div>
  </b-modal>
</template>

<script>
export default {
  name: "ChildModal",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localShow: this.show,
    };
  },
  watch: {
    show(val) {
      this.localShow = val;
    },
    localShow(val) {
      if (!val) {
        this.$emit('close');
      }
    }
  },
  methods: {
    closeModal() {
      this.localShow = false;
    },
  },
};
</script>

Parent Component

It controls when the modal is showed or is closed.

<template>
  <div>
    <b-button @click="showModal = true">Abrir Modal</b-button>

    <child-modal :show="showModal" @close="showModal = false" />
  </div>
</template>

<script>
import ChildModal from './ChildModal.vue';

export default {
  name: "ParentComponent",
  components: {
    ChildModal,
  },
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

🧠 Explanation:

• :show="showModal" → father gives the open sign.
• @close="showModal = false" → child component emit the close sign.
• In child component, it is used .sync on :active of b-modal to do bidirectional binding, but it is only at internal level (localShow).