v-b-modal problem with v-if

While I am not entirely sure if this is a Bootstrap Vue issue or a pure Vue issue please see the following:

Problem:

When a <b-btn> with a v-b-modal directive is replaced with another <b-btn> without that directive using v-if/v-else in VDOM the effects of the directive are bound also to the second component.

Template code:

<div id="app">
  <b-btn @click="doModal = !doModal">Toggle modal</b-btn>

  <b-btn v-b-modal.modal v-if="doModal">Modal</b-btn>

  <b-btn v-else>No modal</b-btn>
  
  <b-modal id="modal">Modal text</b-modal>

</div>

JS code:

new Vue({
	el: '#app',
  data: {
  	doModal: true,
  }
})

Working example: https://jsfiddle.net/fv1mjnfa/7/

Current result

Button named “Modal” triggers modal visibility. After clicking button named “Toggle modal” the above button is replaced by button named “No modal”. Clicking button “No modal” also triggers the modal.

Expected result

Button with “No modal” text should not trigger the modal.

[mosinve]

I’ve slightly updated your examle to make it work https://jsfiddle.net/cihkem/5y2fs62q/ The catch is to add keys to elements, so Vue will treat them as different vnodes.

[mosinve]

Ok, I’ll review your proposals a bit later.