Iterative tabs +constant tab issue

If we have the following tabs:

<b-tabs card>
    <b-tab :title="`${tabz[key].nativeName}`" v-for="(lang, key, i) in tabz" :key="i">
        Tab Contents: {{tabz[key].name}}
    </b-tab>
    <b-tab title="+">
        Plus tab content
    </b-tab>
</b-tabs>

… everything is fine if the tab’s data is already loaded on the page like this:

        data () {
            return {
                tabz: {
                    bg: {
                        name: "Bulgarian",
                        nativeName: "Български"
                    },
                    en: {
                        name: "English",
                        nativeName: "English"
                    }
                },
                ....

… but if the data comes later(from server) the result is that two tabs will be selected (the first one(Bulgarian) and the ‘+’ tab) and we will see the content of the both selected tabs together. This can be simulated like this:

        data () {
            return {
                tabz: null,
                ...


        created () {
            setTimeout(() => {
                this.tabz = {
                    bg: {
                        name: "Bulgarian",
                        nativeName: "Български"
                    },
                    en: {
                        name: "English",
                        nativeName: "English"
                    }
                }
            }, 1000);

[tmorehouse]

What might happen is that the same tab index or active tab will be selected on update of the tabs content (to keep current functionality when adding tabs to the end). Of which you could then issue a set active tab to reset it to index 0 (via v-modal) after your update.

[tmorehouse]

OK, I think I can fix this relatively easily for next release.