Issues with Deactive and active methods

[david-saint]

The prop visible won't function properly once the deactive method has been called

Steps to reproduce

<button @click="() => modalVisible = true">open modal</button>

<card-modal :visible="modalVisible" @cancel="() => modalVisible = false"> sdklfjsda </card-modal>

data() { return { modalVisible: false }

This would work only when you click the button and the cancel button. When you click the close button the deactive method in the BaseModal Mixin is called, and all it does is set the show to false.
Since the show and the modalVisible are meant to be in sync, the next time you click on the button modalVisible would remain true but show would be false.

if I change the click function of the button to toggle the state of modalVisible, I would have to click 2 times to get the modal back to visible.

The temporary fix is adding ref to the modal

<button @click="() => $refs.modal.active()">open modal</button>

<card-modal ref="modal" :visible="modalVisible" @cancel="() =>$refs.modal.deactive()"> sdklfjsda </card-modal>

Which makes the :visible prop somewhat useless.