Multi-step form wizard: FieldArray does not get populated with initialValues

[epr3]

What happened?

Hello!

First of all, thank you for this great library and the work that was put into it!

As per the title, the FieldArray does not get populated with the initialValues provided on the current step of the form wizard.

Am I missing something in the implementation? Is there any workaround for this use-case?

Thank you in advance,

Reproduction steps

1. Open the reproduction link.
2. Hit next on the form
3. Observe that the initialValues get passed into the form, but the FieldArray isn't updated.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [ ] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-multi-step-form-composition-db43iv

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[logaretm]

Thanks for reporting this and the issue reproduction. initialValues should not probably be treated as reactive because it only affects untouched fields.

I should probably deprecate this and document it.

You can achieve what you need by doing this:

const { values, handleSubmit, resetForm } = useForm({
  // vee-validate will be aware of computed schema changes
  validationSchema: currentSchema,
  // turn this on so each step values won't get removed when you move back or to the next step
  keepValuesOnUnmount: true,
});

// watch the step and reset to whatever is available between values and the initialValues.
watch(
  currentStepIdx,
  () => {
    // update the schema
    resetForm({ values: { ...currentInitialValues.value, ...values } });
  },
  { immediate: true }
);

[epr3]

Got it. Thank you for your answer @logaretm !