【Vue.js】タブの切り替え機能を持たせたい

    <div id="app">
        <button v-for="tab in tabs" 
                v-bind:key="tab.id"
                v-on:click="currentTab = tab.id"> <!--①v-on:clickで押したタブのidがdataのidに変わる-->
            <span v-bind:class="tab.id">{{ tab.text }}</span>
        </button>
        <!--④出来た文字列(例 : tab-home)と同じ名前を持つcomponentを表示させる-->
        <component v-bind:is="currentTabComponent"></component>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
	Vue.component('tab-home', { template: '<div>ホームのコンポーネントです。</div>' })
	Vue.component('tab-posts', { template: '<div>投稿のコンポーネントです。</div>' })
	Vue.component('tab-archive', { template: '<div>一覧のコンポーネントです。</div>' })
	Vue.component('tab-comment', { template: '<div>コメントのコンポーネントです。</div>' })
	new Vue({
		el: '#app',
		data: {
			currentTab: 'home',
			tabs: [
				{id:'home',text:"ホーム"},
				{id:'posts',text:"投稿"},
				{id:'archive',text:"一覧"},
				{id:'comment',text:"コメント"},
			]
		},
        // ②currentTabの中身がv-on:clickイベントで書き換えられたら下記の動作が起動	
		computed: {
			currentTabComponent: function () {
				//③currentTabComponentにtab-(currentTab)の文字列を繋げ呼び出す。
				return 'tab-' + this.currentTab;
			}
		}
	})
    </script>

参考

動的 & 非同期コンポーネント — Vue.js
ログイン｜STARTOUT