setValues mutates initialValues

[nxmad]

What happened?

The issue comes up when I use setValues for the first time—it ends up changing the form's initialValues if it was initially undefined in useForm. This unexpected behavior causes problems when I later try to resetForm.

Reproduction steps

No response

Version

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

What browsers are you seeing the problem on?

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

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-pinia-1uy1ba?file=src%2FApp.vue

Code of Conduct

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

[logaretm]

Looks like this happens if you set the values during setup, if we defer the setting till, say after mounted then it works as expected.

onMounted(() => {
  form.setValues({
    email: 'example@test.com',
    password: '12345678',
  });
})

The issue is when the field is created it checks if the form has a value for it and if it does then it goes "that's my initial value". Semantically that makes sense because it plays well with other situations like "Is the form dirty when you set the values in setup before anything has rendered?" I would say it isn't dirty because values didn't change since first render.

I may have found a fix but it could break some other things, so I'm hesitant to ship it. Is the workaround good enough for your case?

[nxmad]

My current workaround is to set {} explicitly as initialValues. I had wrong assumption undefined is treated the same as {} in useForm. Due to project-specific reasons I can't rely on lifecycle hooks in this question. Also I can see possible issues with conditional rendered inputs for e.g. in multipage forms (aka wizards). Anyways, it looks more like worth mentioning in docs detail than a big issue for me. Thank you for your quick response.