title: Form $ref is undefined inside of method?
body: <p>I have a very simple Vuetify form with <code>ref="form"</code>. When I press submit, I want to validate and programmatically submit the form, however for some reason <code>this.$refs.form</code> returns undefined.</p>
  
  <p><a href="https://i.stack.imgur.com/GNbRN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GNbRN.png" alt="undefined refs"></a> </p>
  
  <p>I'm almost hoping it's something dumb like a typo because this is so seemingly simple!</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-form
      v-if="!submitted"
      ref="form"
      v-model="valid"
      name="contactForm"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      method="POST"
      @submit.prevent="submit"&gt;
      &lt;input
        type="hidden"
        name="form-name"
        value="contactForm"&gt;
  
      ...input fields
  
      &lt;v-row justify="center"&gt;
        &lt;v-col
          sm="12"
          class="text-center"&gt;
          &lt;v-btn
            :disabled="!valid || sendingForm"
            color="accent"
            depressed
            :ripple="false"
            x-large
            type="submit"&gt;
            {{ sendingForm ? 'Loading...' : 'Submit' }}
          &lt;/v-btn&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
      &lt;p class="d-none"&gt;
        &lt;label for="bot-field"&gt;Don't fill this out: &lt;/label&gt;
        &lt;input
          type="text"
          name="bot-field"&gt;
      &lt;/p&gt;
    &lt;/v-form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      methods: {
        async submit() {
          this.sendingForm = true;
          console.log('refs: ', this.$refs); &lt;-- returns undefined for this.$refs.form
          if (this.$refs.form.validate()) {
            console.log('refs: ', this.$refs); &lt;-- also returns undefined for this.$refs.form
            this.$refs.form.submit();
            this.submitted = true;
          }
          this.sendingForm = false;
        }
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have tried removing the <code>v-if</code> on the form, removing the <code>type="submit</code>/adding <code>@click="submit</code> on the button, removing <code>@submit.prevent="submit</code> from the form... nothing seems to be working! Has anybody run into something like this? Thanks!</p>