Why is this Vue.js 2 example not working?

Question

Vue.js

https://jsfiddle.net/gmsa/gfg30Lgv/ - here's an example. I'm trying to transfer it to the project: I transfer the js to the Test.vue file, include it, and transfer the html inside the #app tag. After that nothing works. How to properly organize it? Installed without using Webpack, just saved the Vue.js code to a folder and connected it to the page.
I tried to decompose into files:
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!");
}
}
});

And then I connected these files, and displayed the component tags on the page:

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

The console then says:
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
and 6 more errors.

Answer 1

https://jsfiddle.net/gfg30Lgv/67/
try this
in html template should be placed in

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

but not<template id="id_name"></template>