Пример простой формы (props)

Пример кода для формы с внешним состоянием

Код формы

<template>
  <form
    @submit.prevent="onSubmit"
    @reset.prevent="onReset"
  >
    <div>
      <input
        v-model.lazy="$v.name.$model"
        placeholder="Name"
      >

      <span v-if="$v.name.$error">
        {{ $v.name.$errors[0].messages }}
      </span>
    </div>

    <div>
      <input
        v-model.lazy="form.email"
        type="email"
        placeholder="Email"
      >

      <span v-if="$v.email.$error">
        {{ $v.email.$errors[0].messages }}
      </span>
    </div>

    <div>
      <button type="submit">
        Submit
      </button>

      <button type="reset">
        Reset
      </button>
    </div>
  </form>
</template>

import Vue from 'vue';
import { email, minLength, required } from '@vuelidate/validators';
import { computed, reactive } from '@vue/composition-api';

import { useForm } from '@/composition/form';
import mapSyncProps from '@/utils/map-sync-props';

export default Vue.extend({
  props: {
    name: {
      type: String,
      default: '',
    },

    email: {
      type: String,
      default: '',
    },

    pending: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const form = reactive(mapSyncProps(context.emit, props));
    // Если событие 'reset' обрабатывается из вне
    // то функция не нужна
    const reset = () => {
      form.name = '';
      form.email = '';
    };

    const rules = computed(() => ({
      name: {
        minLength: minLength(4),
        required,
      },

      email: {
        email,
        required,
      },
    }));

    const {
      onSubmit,
      onReset,
      v,
    } = useForm(context, { form, rules, reset });

    return {
      $v: v,
      onSubmit,
      onReset,
      form,
    };
  },
});

Код родителя

import Vue from 'vue';

const defaultForm = () => ({
  name: '',
  email: '',
});

export default Vue.extend({
  data: () => ({
    form: defaultForm(),
    pending: false,
  }),

  methods: {
    onSubmit() {
      console.log(this.form);
    },

    // Опционально, форма может сбрасываться как внутри
    // так и отсюда
    onReset() {
      this.form = defaultForm();
    },
  },
});