configure API should change

[Serpentarius13]

Is your feature request related to a problem? Please describe.

It is impossible to configure form's behavior dynamically. For example, when I want to validate on change only after submitting form, I need to make a key to reset the form's vDOM to make later configure's work. Furthermore, it is impossible to configure more than one form on the page. I think global API like this should be changed and instead be the part of useForm and Form APIs

Describe the solution you'd like

Instead of having a global state value for configurations, assign them to each form and let users change configure options on-the-fly

Describe alternatives you've considered

I've been trying to make it happen like so, but sure it looks ugly:

export const useSchemedForm = <T extends Record<PropertyKey, unknown>>({
  schema,
  onSubmit,
}: Opts<T>) => {
  const formKey = ref("initial");

  const formSchema = toTypedSchema(schema);

  configure({
    bails: false,
    validateOnBlur: false,
    validateOnChange: false,
    validateOnInput: false,
    validateOnModelUpdate: false,
  });

  const form = useForm({
    validationSchema: formSchema,
  });

  const handleSubmit = async (ev: Event) => {
    ev.preventDefault();

    console.log(ev);

    if (formKey.value === "initial") {
      formKey.value = "submitted";
      configure({
        validateOnBlur: true,
        validateOnChange: true,
        validateOnInput: true,
        validateOnModelUpdate: true,
        bails: true,
      });
    }

    setTimeout(async () => {
      const { valid } = await form.validate();
      if (!valid) return;
      const fn = form.handleSubmit(async (data) => {
        await onSubmit(data);
      });

      fn();
    });
  };

  return {
    form,
    handleSubmit,
    formKey,
  };
};

Or:

const validationConfig = ref<Partial<Parameters<typeof configure>[0]>>({
  validateOnChange: false,
  validateOnInput: false,
  validateOnModelUpdate: false,
  validateOnBlur: false,
});

const onSubmit = (ev: Event) => {
  ev.preventDefault();
  validationConfig.value = {
    validateOnChange: true,
    validateOnInput: true,
    validateOnModelUpdate: true,
    validateOnBlur: true,
  };

  const fn = form.handleSubmit(async (data) => {
    emit("submit", data);
  });

  fn();
};

<Field
          v-bind="validationConfig"
          v-slot="{ componentField }"
          name="text"
>

This issue is still left unclosed: #379, so I think it should happen. I'm willing to submit PR. Perhaps we could introduce different modes of validation like 'on-submit', 'after-submit', 'on-change', so people wouldn't need to write them themselves