Vuejs bootstrap tabs

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/x-template" id="queryBrowserTab">
     <h3>{{tab.name}}</h3>
</script>

<div id="queryBrowserContainer">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" v-for="tab in tabs" :class="{active:tab.isActive}">
            <a href="#" role="tab" data-toggle="tab" @click.stop.prevent="setActive(tab)">{{ tab.name }}</a>
        </li>
        <li>
            <button type="button" class="btn btn-primary" @click="openNewTab">New tab</button>
        </li>
    </ul>
    <div class="tab-content">
        <div v-for="tab in tabs" role="tabpanel" class="tab-pane" :class="{active:tab.isActive}">
            <query-browser-tab :tab="tab"></query-browser-tab>
        </div>
    </div>
<pre>{{ $data | json }}</pre>

</div>

JavaScript

Vue.component('query-browser-tab', {
    template: '#queryBrowserTab',
    data: function () {
        return {
            databaseOptions: [],
        };
    },
    props: ['tab'],

    methods: {},

});

new Vue({
    el: '#queryBrowserContainer',
    data: {
        tabs: [{
            name: "tab1",
            id : 0,
            isActive: true
        }],
        activeTab: {}
    },
    ready: function () {
		this.setActive(this.tabs[0]);
    },

    methods: {
        setActive: function (tab) {
            var self = this;
            tab.isActive = true;
            this.activeTab = tab;
            /*this.activeTab.isActive = true;
            console.log("activeTab name=" + this.activeTab.name);*/
            this.tabs.forEach(function (tab) {
                console.log("TAB => " + tab);
                console.log("activeTab id => " + self.activeTab.id);
                console.log("tab id=" + tab.id);

                if (tab.id !== self.activeTab.id) { tab.isActive = false;}
            });
        },
        openNewTab: function () {
            newTab = {
                name: "tab" + (this.tabs.length + 1),
                id: this.tabs.length,
                isActive: true
            };
            this.tabs.push(newTab);
            this.setActive(newTab);
            /*this.activeTab = newTab;

            console.log("### newtab name=" + newTab.name);*/

        },

        closeTab: function () {
            console.log("### CLOSE!");
        }
    }
});