Как правильно реализовать валидацию во Vue3?

Question

[Анастасия]

Я не знаю нормальное ли это решение или нет так как первый проект на фреймворке может есть более удобный способ?

Была установлена библиотека yup
Создан миксин validateMixin для валидации отдельных полей
В компоненте самой формы валидация при сабмите

Код из формы

<template>
  <div class="login">
    <div class="login__left">
      <div class="login__head">
        <h1 class="login__header">Авторизация</h1>
        <div class="login__required">Все поля обязательны для заполнения</div>
      </div>
      <form class="login__form" action="">
        <div class="login__fields">
          <AppInput
              @blur="validateEmail"
              v-model="form.email"
              placeholder="[e-mail]"
              required
              label="E-mail"
              name="email"
              :error="errors.email"
          />
          <InputPassword
              @blur="validatePassword"
              v-model="form.password"
              required
              label="Пароль"
              name="password"
              :error="errors.password"
          />
        </div>
        <q-checkbox size="42px" class="label" color="#2B3674" v-model="form.rememberMe" label="Запомнить меня" />
        <AppButton @click="submit" class="btn">Войти</AppButton>

      </form>
    </div>

    <div class="login__right">
      <img class="object-fit" src="@assets/img/login-photo.jpg" alt="preview">
    </div>

  </div>
</template>

<script>
import * as yup from "yup";
import validateMixin from "@/mixins/validateMixin.js";
export default {
  name: 'Login',
  mixins: [validateMixin],
  data() {
    return {
      form: {
        email: '',
        password: '',
        rememberMe: true,
      },
      errors: {
        email: '',
        password: '',
      }
    }
  },

  methods: {
    submit() {
      const loginFormSchema = yup.object().shape({
        email: yup.string().required('E-mail: Обязательное поле').email('Введите корректный email'),
        password: yup.string().required('Пароль: Обязательное поле')
      });

      loginFormSchema.validate(this.form, { abortEarly: false })
          .then(() => {
            console.log(this.form)
          })
          .catch((errors) => {
            this.errors.email = errors.errors[0];
            this.errors.password = errors.errors[1];
          });
    }
  },
}
</script>

Код из миксина

import * as yup from "yup";
export default {
    name: 'validateMixin',
    methods: {
        validateEmail() {
            const loginFormSchema = yup.object().shape({
                email: yup.string().required('E-mail: Обязательное поле').email('Введите корректный email'),
            });
            loginFormSchema.validate(this.form, { abortEarly: false })
                .then(() => {
                    this.errors.email = '';
                })
                .catch((errors) => {
                    this.errors.email = errors.errors[0];
                });

        },

        validatePassword() {
            const loginFormSchema = yup.object().shape({
                password: yup.string().required('Пароль: Обязательное поле')
            });
            loginFormSchema.validate(this.form, { abortEarly: false })
                .then(() => {
                    this.errors.password = '';
                })
                .catch((errors) => {
                    this.errors.password = errors.errors[0];
                });
        },
    }
}