Tab title slot is not reactive

DISCLAIMER: This issue is a duplicate but meant to be the one place to go to find all information about this bug and a possible workaround until it gets fixed.

As @emanuelmutschlechner mentioned:

Currently the reactivity of tabs is limited to changes on the element <b-tab>. Observation of the DOM does not include subtree changes:

https://github.com/bootstrap-vue/bootstrap-vue/blob/ac7dfbfdd5c48fef44f3018bf101276f76dd226c/src/components/tabs/tabs.js#L413-L419

A current workaround is to set a prop on <b-tab>. This will trigger updateTabs and rerender the tab title slot.

See this example for a live demo of the issue and the workaround: https://codesandbox.io/s/l9qp2xowkz

Replaces: #1397, #1677, #1830, #1871, #2065

[tmorehouse]

Yeah, I’ve peeked at it before (its coded by a guy from the Vue team). He’s doing a bit more funky stuff with source and destination components, and I don’t think we need to go that deep. But he does have some nifty things going on in there.

[tmorehouse]

I’ve been working on making popovers/tooltips “better”, (currently we use DOM re-targetting/moves to bring reactive content into another element, which goes against Vue’s philosophy) And on how to render reactive content into another document location. With render functions, and dynamic components that can be mounted anywhere in the document, we can take advantage of this feature in render functions to render and mount content in other areas of the document, rather than inside the component it exists in. It is nifty stuff, and not-so-obvious (not until a thorough reading of Vue’s source code)