title: Using Vee-validate to disable button until form is filled out correctly
body: <p>I want to disable my submit button until my form is filled out correctly, this is what I have so far:</p>
  
  <pre><code>&lt;form&gt;
     &lt;input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" /&gt;
     &lt;span v-show="errors.has('email')"&gt;{{ errors.first('email') }}&lt;/span&gt;
     &lt;button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit"&gt;Send Invite&lt;/button&gt;
     &lt;button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit"&gt;Send Invite&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The above only prints an error message and disables my submit button after I've started inputting a value. I need it to be disabled from the start, before I start interacting with the input, so that I cannot send an empty string. </p>
  
  <p>Another question is if there is a better way than using <code>v-if</code>to do this?</p>
  
  <p>EDIT:</p>
  
  <pre><code> userCreate: {
          customerId: null,
          userPrincipalName: '',
          name: 'unknown',
          isAdmin: false,
          isGlobalAdmin: false,
          parkIds: []
      }
  </code></pre>