Vue.js Component for Bulma Tabs

<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" integrity="sha256-zKA1Bf41O96+gJSlkn/Bh2HATW/OhwkApPlYTp3B5O8=" crossorigin="anonymous" />

<div id="vueapp">

<bulma-tab-panel :tabpanes="mytabpanes"></bulma-tab-panel>

</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("bulma-tab-panel", {
    template: `
<div>
  <!-- Nav tabs -->
  <div class="tabs">
    <ul>
      <li v-for="(tabpane, index) in tabpanes" v-bind:class="{ 'is-active': tabsel == index }" @click="tabsel = index"><a>{{tabpane.nav}}</a></li>
    </ul>
  </div>
  <!-- Tab panes -->
  <div class="content">
    <div v-for="(tabpane, index) in tabpanes" v-show="tabsel == index">{{tabpane.pane}}</div>
  </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"},
    ]
  }
});