This is not accessible

[maxshuty]

First off thank you, I like the way you approached creating tabs, however there are a couple issues.

This tabs component is not accessible at all. Here is a fiddle from W3 which can help you to make this accessible. If you're open to me submitting a PR addressing these issues I would be happy to do that too, however, this guide on LearnVue.co also needs to be updated.

Additionally in your example on LearnVue you are missing a comma in this code snippet that prevents it from compiling (this is in a few sections on the tutorial):

<script>
  export default {
    data () {
      return {
        selectedIndex: 0 // <-- missing comma
        tabs: [],        // all of the tabs
      }
    }
  }
</script>

Another issue is difficult to notice on the surface, however, in the Tab.vue you have the title prop as not required with a default title of 'Tab' and then in the Tabs.vue you have a v-for with the key set to the title like this: :key='tab.title'. Obviously the tab title is not guaranteed to be unique. An easy fix is to make it a required prop, but even then it's still not guaranteed, though I'm struggling to think of a real life scenario where you would have two or more identically named tabs. You could also just use something like :key="`tab-${index}`".

Finally you may want to consider scoping your CSS and talking about the benefits of doing that. In this scenario if someone has an existing <ul><li class="tab"></li></ul> in their code then it will have conflicts, but this isn't necessary as it's more of an opinion based thing.