Estoy buscando hacer un componente global Bootstrap Vue Modal que pueda usar para todas mis necesidades modales.

El problema al que me enfrento es que sigue dándome un error con respecto a la mutación de accesorios. No puede actualizarlos directamente en el componente secundario. Lo cual tiene sentido.

Esto es lo que tengo hasta ahora:

 <template> <b-modal v-model="show" size="lg" scrollable centered header-class="event-close-modal-header" @hide="$emit('close')" @cancel="$emit('close')" @ok="$emit('close')" @show="handleShow" > <template #modal-title="{}"> <span class="event-close-modal-header-mc2">{{ title }}</span> </template> <b-container fluid class="pb-4"> <h1>Content goes here</h1> <slot /> </b-container> </b-modal> </template> <script> export default { props: { show: { type: Boolean, default: false, required: true, }, title: { type: String, required: true, }, }, data() { return {}; }, }; </script>

Y en mi padre tengo algo como esto:

 <ModalHelper :show.sync="modalOne" // modalOne is a data property title="One" @close="modalOne = false" /> <button @click="modalOne = true">Open Modal One</button>

Error: