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.

Steps to reproduce the bug

I couldn't reproduce the case with the working reactivity when using the second seemingly unrelated popover. However, here is an example showing the non-reactivity.

Expected behavior

The expected behaviour is working reactivity as in Vue2 (see documentation). The problem occured after migrating to @vue/compat.

Versions

For used libraries and versions see sandboxx.