title: Taking 2 clicks to set variable in v-tab with Vuetify
body: <p>I am using Vuetify and vuejs to create 3 tabs. I'm dynamically switching between tabs by binding to the <code>href</code> of a <code>v-tab</code>. I'm just changing the <code>speed</code> variable each time I click on a tab. For some reason the <code>speed</code> variable, lags behind by one click. So even though I click on the <code>expedited</code> tab the <code>speed</code> variable is still stuck on <code>standard</code> until I click again, and THEN it is set to <code>expedited</code> and the tab works like normal. Here is my code, and there are no errors.. </p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;v-container fill-height&gt;
        &lt;v-layout row wrap align-center&gt;
          &lt;v-flex xs8 class="mx-auto"&gt;
              &lt;h1 class="display-1 mont bold fix-title-height pb-3"&gt;Shipping Settings&lt;/h1&gt;
              &lt;v-tabs icons-and-text centered color="purple darken-3" dark class="elevation-12"&gt;
                &lt;v-tabs-slider color="green lighten-1"&gt;&lt;/v-tabs-slider&gt;
                &lt;v-tab :href="'#' + speed" @click="setStandard"&gt;
                  &lt;!--I think the idea here is just to just emit the name passing it to the component which
                  then is customized for that speed--&gt;
                  Standard
                &lt;/v-tab&gt;
                &lt;v-tab :href="'#' + speed" @click="setExpedited"&gt;
                  Expedited
                &lt;/v-tab&gt;
                &lt;v-tab :href="'#' + speed" @click="setPriority"&gt;
                  Priority
                &lt;/v-tab&gt;
  
                &lt;v-tab-item id="standard"&gt;
                  &lt;standard_speed&gt;&lt;/standard_speed&gt;
                &lt;/v-tab-item&gt;
  
                &lt;v-tab-item id="expedited"&gt;
                  &lt;v-card flat&gt;
                    &lt;v-card-text&gt;expedited here&lt;/v-card-text&gt;
                  &lt;/v-card&gt;
                &lt;/v-tab-item&gt;
  
                &lt;v-tab-item id="priority"&gt;
                  &lt;v-card flat&gt;
                    &lt;v-card-text&gt;priority here&lt;/v-card-text&gt;
                  &lt;/v-card&gt;
                &lt;/v-tab-item&gt;
  
              &lt;/v-tabs&gt;
           &lt;/v-flex&gt; 
       &lt;/v-layout&gt;
      &lt;/v-container&gt;   
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import standard_speed from '../components/standard_speed.vue';
  
  export default {
    data: function() {
      return {
        speed: "standard"
      };
    },
    components: {
      standard_speed
    },
    methods: {
      setStandard() {
        console.log("Is speed getting set? " + this.speed);
        this.speed = "standard";
      },
      setExpedited() {
        this.speed = "expedited"
      },
      setPriority() {
        this.speed = "priority"
      },    
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Any idea why my <code>speed</code> variable is not getting updated on the first click?</p>