title: How to set Vuetify tabs to active based on url
body: <p>I'm using <code>vue 2.6.11</code>, <code>vuetify 2.2.9</code> and <a href="https://github.com/tightenco/ziggy" rel="nofollow noreferrer"><code>ziggy 0.8.1</code></a>. 
  For the Vuetify tabs I have the following: </p>
  
  <pre><code>&lt;template&gt;
      &lt;v-tabs
          background-color="transparent"
          slider-color="secondary"
          icons-and-text
          dark
          :value="`${route().current()}`"
          v-model="active_tab"
      &gt;
          &lt;v-tab
              :href="route('project.projects.show', $page.project.id)"
              link
              exact
              key="project.projects.show"
          &gt;
              Project
          &lt;/v-tab&gt;
  
          &lt;v-tab
              :href="route('project.projects.company', $page.project.id)"
              link
              exact
              key="project.projects.company"
          &gt;
              Company
          &lt;/v-tab&gt;
  
          &lt;v-tab
              :href="route('project.invoices.index', $page.project.id)"
              link
              exact
              key="'project.invoices.index"
          &gt;
              Invoices
          &lt;/v-tab&gt;
      &lt;/v-tabs&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data()
      {
          return {
              active_tab: `${route().current()}`,
          }
      },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Depending on the location of <code>route().current()</code> it returns a different value. In the <code>&lt;template&gt;</code> it returns the full URL and in the <code>&lt;script&gt;</code> it only returns the Laravel route name. The problem is even though the key and <code>route().current()</code> match, the corresponding tab still isn't set to active. </p>
  
  <p>Have looked at <a href="https://stackoverflow.com/questions/50392918/vuetify-how-to-preselect-active-tab">Vuetify: How to preselect active tab?</a> but none of the answers work.</p>
  
  <p><strong>Update</strong></p>
  
  <p>After looking at it some more it turns out that <code>active_tab: `${route().current()}`,</code> is always set to wrong URL. For example when on the invoices route it still returns the url for the project. So it is related to ziggy.</p>