JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@1.5.7/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <v-tabs v-model="active" grow>
      <v-tab v-for="tab of tabs" :key="tab.id" :to="tab.route">
        {{ tab.name }}
      </v-tab>

      <v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
      <!-- HOW USE :value via route name? ="{ name: tab.route_name}" -->
        <router-view></router-view>  
      </v-tab-item>

    </v-tabs>
  </v-app>
</div>

JavaScript

const Task = {
  template: '<p>Task!</p>'
};
const Project = {
  template: '<p>Project!</p>'
};

const routes = [
  {
    path: '/task',
    name: 'task',
    component: Task
  },
  {
    path: '/project',
    name: 'project',
    component: Project
  },
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  data: {
      active: '',
    },
  computed: {
  	tabs () {
     	return  [
        { id: 1, name: "Task", route:  this.routeResolve('task') },
        { id: 2, name: "Project", route: this.routeResolve('project') }
      ]
    }
  },
  methods: {
    routeResolve (name) {
      return this.$router.resolve({
        name: name,
      }).location.path
    },
  },
})