Referencing errorMessage in template via useField crashes browser. AND meta.valid is always false.

[jamiedoris]

Tried to simplify a very complicated form component here. I realize there could be any number of other factors causing my issues but here it is....

< owl-toggle > is a custom component which is not important, other than I want it disabled until the email field is valid.

<template>
 <div>
   <Form
      v-slot="{ errors, meta: formMeta }"
      @submit.prevent="submitRespondent"
      :validation-schema="schema"
      :initial-values="respondentData"
    >
          <Field
            name="email"
            type="text"
            v-model="patientForm.email"
            placeholder="-"
            @blur="emailBlur"
          />
         <ErrorMessage name="email" />
          <owl-toggle
            v-model:value="patientForm.email_notification"
            :disabled="emailErr" <!-- emailErr causes browser to stop responding -->
          />
          <!-- owl-toggle
            v-model:value="patientForm.email_notification"
            :disabled="(emailMeta.dirty && !emailMeta.valid)" <!-- emailMeta.valid is ALWAYS false here -->
          / -->
   </Form>
 </div>
</template>

<script>
import { useField } from 'vee-validate';

export default {
  setup () {
    const { meta: emailMeta, value: email, errorMessage: emailErr, handleBlur: emailBlur } = useField('email', 'email');
    return {
      emailMeta,
      email,
      emailErr,
      emailBlur
    }
  },
  components: {
    OwlToggle
  },
  data () {
    return {
      patientForm: { email: '', email_notification: false },
      schema: {
        email: 'email',
        email_notification: false,
      },
      respondentData: { email: '', email_notification: false }
  },
  methods: {
    submitRespondent () {
      ....
     }
   }
}
</script>

[jamiedoris]

I worked around it by abandoning useField() and instead leveraging the slots in the Form tag like so:

   <Form
      v-slot="{ errors: formErrors }"
      @submit.prevent="submitRespondent"
      :validation-schema="schema"
      :initial-values="respondentData"
    >
          <Field
            name="email"
            type="text"
            v-model="patientForm.email"
            placeholder="-"
            @blur="emailBlur"
          />
         <ErrorMessage name="email" />
          <owl-toggle
            v-model:value="patientForm.email_notification"
            :disabled="emailIsInvalid(formErrors)"
          />

...

methods: {
    emailIsInvalid (formErrors) {
      if (this.patientForm.email === '' || (formErrors !== undefined && Object.hasOwn(formErrors, 'email'))) {
        this.patientForm.email_notification = false;
        return true;
      }
      return false;
    }
}