How to disable a form using validateAll from veeValidate as a computed property?

Question

Say i have this button in a component and want to dynamically have the button be disabled until a user has filled out the textField with a valid email.

      <v-btn
        type="submit"
        data-test="btn-identity"
        block
        large
        :disabled="!validEmail"
        color="primary">{{ $t('button.identity') }}
      </v-btn>


    <v-text-field
      v-validate="'required|email'"
      v-model="form.userId"
      :label="$t('placeholder.userId')"
      :error-messages="errors.collect('email')"
      data-vv-name="email"
      required
      autofocus
    />

I'm setting valid email as a computed property, but it doesnt seem to work since its a promise

  computed: {
    validEmail () {
      return this.$validator.validateAll().then((result) => {
        return result;
      })
    }
  },

Answer 1

Computed properties in Vue are synchronous. You can either try vue-async-computed or use a watcher

<v-btn
        type="submit"
        data-test="btn-identity"
        block
        large
        :disabled="!validEmail"
        color="primary">{{ $t('button.identity') }}
      </v-btn>


<v-text-field
  v-validate="'required|email'"
  v-model="form.userId"
  :label="$t('placeholder.userId')"
  :error-messages="errors.collect('email')"
  data-vv-name="email"
  required
  autofocus
/>

watch: {
    "form.userId": function (newId, oldId) {
          this.$validator.validateAll().then((result) => {
              this.validEmail = result; // use a separate method to set validEmail here 
      })
    }
},

I also found vee-validate documentation for async validation. It has the same idea like what I suggested above: https://vee-validate.logaretm.com/examples.html#coupon-example