title: Vuetify loader which depends on API response
body: <p>I made a login form and button with preloader:</p>
  
  <pre><code>&lt;v-btn @click="login" :loading="loading4" :disabled="loading4"
         @click.native="loader = 'loading4'"&gt;
    {{ $t('forms.labels.loginBtn') }}           
    &lt;span slot="loader" class="btn-loader"&gt;
      &lt;v-icon light&gt;cached&lt;/v-icon&gt;
    &lt;/span&gt;
  &lt;/v-btn&gt;
  </code></pre>
  
  <p>I want to show btn preloader when api response is 'pending'.
  I fetch api status from computed:</p>
  
  <pre><code>...mapGetters({
    loginStatus: 'auth/authStatus'
  }),
  </code></pre>
  
  <p>In Vuetify docs I found only solution with setTimeout and I don't know how to customize it to my api response:</p>
  
  <pre><code>watch: {
    loader () {
      const l = this.loader
      this[l] = !this[l]
  
      setTimeout(() =&gt; (this[l] = false), 3000)
  
      this.loader = null
    }
  }
  </code></pre>
  
  <p>My store:</p>
  
  <pre><code>const state = {
    token: localStorage.getItem('user-token'),
    status: null
  }
  </code></pre>
  
  <p>I want to show preloader only when state status is 'loading'. I'm changing state using mutation.</p>
  
  <p>How to do this and what <code>this[l]</code> means?
  Thanks.</p>