Vuetfiy Tabs Not Displayed - vue.js

Question

I tried to implement tabs to my component. Tabs can't be displayed. I took the same example from https://vuetifyjs.com/en/components/tabs TypeError: this.$parent.addTab is not a function error is logged on console. I upgraded the vuetify version but it isn't working. What could be the problem? Component content is below.
<template><div>
<v-tabs v-model="active"
color="cyan"
dark
slider-color="yellow">
<v-tab v-for="n in 3"
:key="n"
ripple>
Item {{ n }}
</v-tab>
<v-tab-item v-for="n in 3"
:key="n">
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
<div class="text-xs-center mt-3">
<v-btn #click="next">next tab</v-btn>
</div>
</div></template>
<script>
export default {
data() {
return {
active: null,
text: 'Lorem ipsum'
}
},
methods: {
next() {
const active = parseInt(this.active)
this.active = (active < 2 ? active + 1 : 0)
}
}
}</script>
My app.vue:
<v-app id="inspire">
<v-navigation-drawer persistent clipped enable-resize-watcher v-model="drawer" app>
<MenuComponent></MenuComponent>
</v-navigation-drawer>
<v-toolbar color="cyan darken-3" dark fixed clipped-left app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn #click="logout" icon>
<v-icon>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<main>
<v-content>
<vue-snotify></vue-snotify>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</main>
<v-footer color="cyan darken-3" app fixed>
<span class="white--text"> © 2018 </span>
</v-footer>
</v-app>

Answer 1

I found the problem. I had imported vue-nav-tabs. I removed it and now it is working.

Answer 2

Took me a moment to realise that you don't need href e.g
<v-tabs
v-model="tabs"
background-color="deep-purple accent-4"
centered
dark
icons-and-text
>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#tab-2">
Favorites
<v-icon>mdi-heart</v-icon>
</v-tab>
<v-tab href="#tab-3">
Nearby
<v-icon>mdi-account-box</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs">
<v-tab-item
>
<v-card flat>
<v-card-text><p>hey</p></v-card-text>
</v-card>
</v-tab-item>
<v-tab-item
>
<v-card flat>
<v-card-text> <p>hey</p></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
Removing href="#tab-2" and href="#tab-3" worked because I have not set the value if you don't necessarily need to set the value in v-tab-item.
<v-tab-item
v-for="i in 3"
:key="i"
:value="'tab-' + i"
>