title: How to use Vuetify tabs with vue-router via router name
body: <p>In this <a href="https://stackoverflow.com/questions/49721710/how-to-use-vuetify-tabs-with-vue-router">question</a> there is a great example of a <a href="https://stackoverflow.com/a/54990915/2045988">solution</a>. But it is not working when I try to use route via name.</p>
  
  <p>I tried something like that:</p>
  
  <pre><code>&lt;v-tabs v-model="active"&gt;
      &lt;v-tab v-for="tab of tabs" :key="tab.id" :to="{ name: tab.route_name }"&gt;
          {{ tab.name }}
      &lt;/v-tab&gt;
  
      &lt;v-tab-item v-for="tab of tabs" :key="tab.id" :value="{ name: tab.route_name }"&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/v-tab-item&gt;
  &lt;/v-tabs&gt;
  </code></pre>
  
  <pre><code>data() {
      return {
        active: '',
        tabs: [
          { id: 1, name: "Task", route_name: 'task' },
          { id: 2, name: "Project", route_name: 'project' }
        ]
      };
    }
  </code></pre>
  
  <pre><code>const routes = [
    {
      path: '/task',
      name: 'task',
      component: Task
    },
    {
      path: '/project',
      name: 'project',
      component: Project
    },
  ];
  </code></pre>
  
  <p>It just breaks, because :value can't be Object.</p>
  
  <p>I create <a href="https://jsfiddle.net/Izheme/z530uowp/" rel="nofollow noreferrer">working jsfiddle</a> and <a href="https://jsfiddle.net/Izheme/wgesrv3f/" rel="nofollow noreferrer">breaking version</a> for play.</p>
  
  <p>P.S. I can't add comments to answers, so I created a new question.</p>
  
  <p><strong>Update: Temporary solution:</strong></p>
  
  <p>I use the manual resolve of the router, like:</p>
  
  <pre><code>&lt;v-tabs v-model="active"&gt;
      &lt;v-tab v-for="tab of tabs" :key="tab.id" :to="tab.route"&gt;
          {{ tab.name }}
      &lt;/v-tab&gt;
  
      &lt;v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route"&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/v-tab-item&gt;
  &lt;/v-tabs&gt;
  </code></pre>
  
  <pre><code>  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
      },
    },
  </code></pre>
  
  <p><a href="https://jsfiddle.net/zk6afxh0/" rel="nofollow noreferrer">jsfiddle example</a></p>