なぜこの例のVue.js 2は機能しませんか？

Question

https://jsfiddle.net/gmsa/gfg30Lgv/ - ここに私のプロジェクトで使用したい例があります。 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) { 
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!"); 
} 
} 
}); 

含まれるファイル私は、ファイルを作成しました。その後、追加のタグ私はこのプロジェクトでのWebPACKを使用していない

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

\コンソールのエラー：。 「データ」オプションは、コンポーネント定義でインスタンスごとの値を返す関数でなければなりません。機能のレンダリングに

エラー： （で見つかった）

が、私は仕事の罰金を作った未定義

前のコンポーネントのプロパティ「name」を読み取ることができません。

Answer 1

"data"オプションは、コンポーネントごとにインスタンスごとに の値を返す関数である必要があります。

data: function() { 
    return { 
    ... 
    }; 
}, 

ドキュメントが明確である：data must be a functionあなたがdata: { ... }を使用していて、query-browser-tabコンポーネントと同じデータのコードを使用する必要がありますquery-browser-containerコンポーネントで

。