Использование Vee-validate для отключения кнопки до правильного заполнения формы

Я хочу отключить кнопку отправки до тех пор, пока моя форма не будет заполнена правильно, это то, что я до сих пор имею:

<form>
   <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />
   <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
   <button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
   <button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
</form>

Выше только печатает сообщение об ошибке и отключает кнопку отправки после того, как я ' мы начали вводить значение. Мне нужно, чтобы он был отключен с самого начала, прежде чем я начну взаимодействовать с вводом, чтобы я не мог отправить пустую строку.

Другой вопрос, есть ли лучший способ, чем использовать v-if, чтобы сделать это?

РЕДАКТИРОВАТЬ:

 userCreate: {
        customerId: null,
        userPrincipalName: '',
        name: 'unknown',
        isAdmin: false,
        isGlobalAdmin: false,
        parkIds: []
    }