Почему не работает этот пример Vue.js 2?

Question

[rinatoptimus]

https://jsfiddle.net/gmsa/gfg30Lgv/ - здесь пример. Пробую перенести его в проект: js переношу в файл Test.vue, подключаю его, а html переношу внутрь тега #app. После этого ничего не работает. Как грамотно это организовать? Устанавливал без использования Вебпака, просто сохранил код Vue.js в папку и подключил к странице.

Пробовал разложить по файлам:
Tabs.vue:

Vue.component('query-browser-tab', {
    template: `
        <div id="queryBrowserTab">
            <h3>{{tab.name}}</h3>
        </div>`,
    data: function () {
        return {
            databaseOptions: [],
        };
    },
    props: ['tab'],
    methods: {}
});

Container.vue:

Vue.component('query-browser-container', {
template: `
<div id="queryBrowserContainer" style="margin-top: 50px;margin-left: 400px;">
    <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>`,
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.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);
},

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

И потом подключил эти файлы, а теги компонентов вывел на странице:

<query-browser-tab></query-browser-tab>
 <query-browser-container></query-browser-container>

В консоли после этого пишется:
The "data" option should be a function that returns a per-instance value in component definitions.

Error in render function:
(found in )

Cannot read property 'name' of undefined

ну и еще 6 ошибок.

Comments

[Aslan]

Ну еще как минимум стоит подключить сам Vue

[rinatoptimus]

Aslan: Другие компоненты работают, я не стал писать, что я подключил все эти Вью джээсы, Бабели и тд.

[Aslan]

rinatoptimus: что говорит консоль?

[rinatoptimus]

Aslan: со страницы все пропадает, в консоли:
Failed to resolve filter: json
(found in - use the "name" option for better debugging messages.)

Property or method "tab" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in )

Error in render function:
(found in )

Answer 1

[lem_prod]

https://jsfiddle.net/gfg30Lgv/67/
попробуйте так
в html шаблон надо помещать в

<script type="text/x-template" id="id_name"></script>

а не <template id="id_name"></template>

Comments

[fffixed]

а что не так с <template id="id_name"> ?

[lem_prod]

template используется для других целей, Vue необходимо, что бы компонент был единым тегом, то-есть компонент не может быть

<div>{{header}}</div>
<div>{{content}}</div>

и вам нужно делать обертку

<div>
    <div>{{header}}</div>
    <div>{{content}}</div>
</div>

но если вы хотите вставить без обертки, то можно написать

<template>
    <div>{{header}}</div>
    <div>{{content}}</div>
</template>

тогда в документе появятся только 2 div, без template