A form that validates Japanese input

Form.vue

<template>
  <v-form
    @submit.prevent="handleSubmit"
  >
    <name-input
      v-model="form.speakerName"
      :english-errors="englishErrors"
      :japanese-errors="japaneseErrors"
      @touch-english="$v.form.speakerName.english.$touch()"
      @touch-japanese="$v.form.speakerName.japanese.$touch()"
    />
    <v-btn
      color="primary"
      type="submit"
    >
      Submit
    </v-btn>
  </v-form>
</template>

<script>
import NameInput from '@/components/nomination/NameInput.vue';
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
import japanese from '@/validators/japanese';

export default {
  components: {
    NameInput,
  },
  mixins: [validationMixin],
  validations: {
    form: {
      speakerName: {
        english: { required },
        japanese: { required, japanese },
      },
    },
  },
  data() {
    return {
      form: {
        speakerName: {
          english: '',
          japanese: '',
        },
      },
    };
  },
  computed: {
    englishErrors() {
      const errors = [];
      if (!this.$v.form.speakerName.english.$dirty) { return errors; }
      if (!this.$v.form.speakerName.english.required) { errors.push('Name is required'); }
      return errors;
    },
    japaneseErrors() {
      const errors = [];
      if (!this.$v.form.speakerName.japanese.$dirty) { return errors; }
      if (!this.$v.form.speakerName.japanese.required) { errors.push('Japanese name is required'); }
      if (!this.$v.form.speakerName.japanese.japanese) { errors.push('Please enter your name in Kanji / Kana'); }
      return errors;
    },
  },
  methods: {
    resetForm() {
      this.$set(this.form, 'speakerName', { english: '', japanese: '' });
      this.$v.$reset();
    },
    handleSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        console.error('invalid form');
      }
      // TODO
    },
  },
};
</script>

NameInput.vue

<template>
  <v-row dense>
    <v-col
      cols="12"
      md="6"
      xs="12"
    >
      <v-text-field
        ref="english"
        :value="value.english"
        :error-messages="englishErrors"
        label="Name (English / Romaji)"
        outlined
        @input="updateName('english', $event)"
        @blur="$emit('touch-english')"
      />
    </v-col>
    <v-col
      cols="12"
      md="6"
      xs="12"
    >
      <v-text-field
        ref="japanese"
        :value="value.japanese"
        :error-messages="japaneseErrors"
        label="Name (Kanji / Kana)"
        outlined
        @input="updateName('japanese', $event)"
        @blur="$emit('touch-japanese')"
      />
    </v-col>
  </v-row>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      required: true,
    },
    englishErrors: {
      type: Array,
      default: () => [],
    },
    japaneseErrors: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      nameFields: ['english', 'japanese'],
    };
  },
  methods: {
    // Build the Name object by populating all the nameFields and latest values
    updateName(updatedField, updatedValue) {
      const name = {};
      this.nameFields.forEach((field) => {
        name[field] = updatedField === field ? updatedValue : this.$refs[field].value;
      });
      this.$emit('input', name);
      this.$emit(`touch-${updatedField}`);
    },
  },
};
</script>