Как использовать vee-validate 4.7.x с Vuetify 3.1.x для проверки?

(Обратите внимание: у этого вопроса уже были более старые сообщения, однако они касаются более старых версий vuetify)

Я изо всех сил пытался запустить простую проверку формы с помощью vee-validate (4.7.4), vue (3.2.4) и vuetify (3.1.3).

Например, поле ввода электронной почты не показывает ошибку, если вы вводите недействительный адрес электронной почты.

Вот соответствующий код (ссылка на stackblitz приведена ниже):

<script setup>
import { markRaw, onMounted, toRefs, ref } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';
import TextFieldWithValidation from './components/TextFieldWithValidation.vue';

const email = useField('email');
const password = useField('password');

/*const schema = markRaw(yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
})); //*/

const { handleSubmit, resetForm } = useForm({
  validationSchema: /* schema */ {
    email(value) {
      if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true;
      return 'Must be a valid e-mail.';
    },
    password(value) {
      if (value?.length >= 8) return true;
      return 'Password needs to be at least 8 characters.';
    },
  }
});

function onInvalidSubmit({ values, errors, results }) {
  console.info('onInvalidSubmit():');
  console.info(values);
  console.info('Errors: ', errors);
  console.info('Detailed results: ', results);
}

const onSubmit = handleSubmit((values) => {
  console.info('onSubmit() - values:', values);
}, onInvalidSubmit); //*/
</script>

<template>
  <div style = "padding: 10px">
    <h4>Form with vee-validate (and preferrably yup):</h4>
    <form @submit.prevent = "onSubmit">
      <v-text-field
        label = "E-mail"
        v-model = "email.value.value"
        :error-messages = "email.errorMessage.value"
      ></v-text-field>

      <v-text-field
        label = "Password"
        type = "password"
        v-model = "password.value.value"
        :error-messages = "password.errorMessage.value"
      ></v-text-field>
    </form>

    <v-btn color = "primary" class = "mr-4" type = "submit"> Submit </v-btn>

    <div>Email: {{ email.value.value }}</div>
    <div>Password: {{ password.value.value }}</div>
  </div>
</template>

Я следовал этому примеру в документации vuetify:

https://next.vuetifyjs.com/en/components/forms/#vee-validate

Кроме того, вот проект stackblitz, чтобы вы могли поиграть и, возможно, найти настоящую ошибку:

https://stackblitz.com/edit/vee-validate-v4-vuetify-g1sg9z?file=src%2FApp.vue

Был бы признателен, если бы кто-то мог пролить свет на этот вопрос.