Vue.component('tabs', { template: ` <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> `, created() { this.tabs = this.$children; }, data() { return { tabs: [], }; }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name === selectedTab.name); }); } }, }); Vue.component('tab', { computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, data() { return { isActive: false }; }, mounted() { this.isActive = this.selected; }, props: { name: { required: true }, selected: { default: false }, }, template: ` <div v-show="isActive"><slot></slot></div> `, }); const app = new Vue({ el: '#root', data: { }, });