Как я могу абстрагироваться от ошибок при проверке?

Question

В настоящее время у меня есть пользовательский компонент с v-validate для родителя.Я хотел бы абстрагировать "fields.email && fields.email.touched ? errors.first('email') : ''" в его собственный метод, предпочтительно на mixin.Я попытался создать метод, который принимает name и возвращает результат выше, это, кажется, не работает из-за нереактивных методов.Я также пытался создать вычисляемое свойство, но не могу создать динамическое.Решение, которое может работать, заключается в динамическом создании вычисляемых свойств, однако: я считаю, что это невозможно.

Вот мой код:

InputField.vue:

<template>
  <label :for='name' :class="{error: error}">
    {{ label }}
    <input 
      class='input'
      :value="value"
      :disabled="disabled"
      :name="name" 
      :type="type"
      :placeholder="placeholder"
      @input="$emit('input', $event.target.value)" 
      @change="$emit('change', $event.target.value)" 
      @blur="$emit('blur')"
      />
    <p v-if="error">{{ error }}</p>
  </label>
</template>

<script>
export default {
  props: {
    label: String,
    name: String,
    type: String,
    value: [String, Number],
    placeholder: [String, Number],
    disabled: {
      type: Boolean,
      default: false
    },
    error: String
  }
};
</script>

LoginModal.vue

<template>
  <div class='login-modal-inner'>
    <div class='left-box form-wrapper'>
      <h3>Login</h3>
      <form @submit.prevent="submitForm('login')">
        <input-field 
          v-model.trim="login.email" 
          name='email' 
          label='Email' 
          type='email' 
          v-validate="'required|email'"
          :error="fields.email && fields.email.touched ? errors.first('email') : ''"
        />
        <input-field 
          v-model="login.password" 
          name='password' 
          label='Password' 
          type='password' 
          v-validate="'required'"
        />
        <app-button class='submit'>Log In</app-button>
      </form>
    </div>

   ...

  </div>
</template>

<script>
import InputField from "../UI/input/InputField.vue";
import Button from "../UI/input/Button.vue";
import InputValidationError from "../UI/input/Button.vue";

export default {
  data() {
    return {
      register: {
        email: "",
        password: "",
        confirmPassword: ""
      },
      login: {
        email: "",
        password: ""
      }
    };
  },
  methods: {
    submitForm(type) {
      this.submitClicked = true;
      this.$validator.validate();
      this.$emit(`${type}-submit`, this[type]);
    },
  },
  components: {
    InputField,
    appButton: Button
  }
};
</script>