BootstrapVue Popover: Strange reactivity behaviour

Question

I have a Vue tempate code similar to this one:

<b-button id="button" @click="editingComment=true">
  Click me
</b-button>

<b-popover target="button">
  <template #title>
    <div>Comment is beeing<span v-if="editingComment"> {{ true ? 'edited' : 'created' }}</span></div>
  </template>
  <div id="content">
    Content
  </div>
</b-popover>

Depending on a seemingly unrelated "condition", the title is rendered correctly or not.

I wrote a script that changes the state of editingComment every two seconds. If I make the title of another - seemingly unrelated - popover depend on editingComment, both popovers keep changing their titles according to editingComment. Otherwise, the given popover's title doesn't change.

What can be the cause of this behaviour? The problem occured after migrating to the Vue3 compatibility version.

Look here for an example showing the non-reactivity.

Answer 1

According to Estus Flask's comments there is an error in how BootstrapVue treats slot vnodes internally.

A quick workaround is to use Vue's $forceUpdate() method.

To do this, one can add a reference to the component and force an update on variable changes:

<b-popover ref="popover" target="button">

watch: {
    'editingComment'() {
        this.$refs.popover.$forceUpdate();
    }
}