Vue.js Component for Semantic UI Basic Tabs

<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css">

<div id="vueapp">
  <semantic-ui-basic-tab :tabpanes="mytabpanes"></semantic-ui-basic-tab>
</div>

<!-- you can put the following line at the end of html body -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

'use strict';

Vue.component("semantic-ui-basic-tab", {
    template: `
<div>
  <!-- Nav tabs -->
  <div class="ui top attached tabular menu">
    <a class="item"
       v-for="(tabpane, index) in tabpanes"
       v-bind:class="{ 'active': tabsel == index }"
       @click="tabsel = index">
      {{tabpane.nav}}
    </a>
  </div>
  <!-- Tab panes -->
  <div class="ui bottom attached tab segment"
       v-for="(tabpane, index) in tabpanes"
       v-bind:class="{ 'active': tabsel == index }">
     {{tabpane.pane}}
  </div>
</div>
`,
    props: ["tabpanes"],
    data: function() {
      return {
        tabsel: 0
      }
    }
});

var app = new Vue({
  el: '#vueapp',
  data: {
    mytabpanes: [
      {nav: "tab1", pane:"tab1 content"},
      {nav: "tab2", pane:"tab2 content"},
      {nav: "tab3", pane:"tab3 content"},
      {nav: "tab4", pane:"tab4 content"},
    ]
  }
});