Type error on (form) values and handleSubmit not correct when using a computed as initial values

[Ricky-rick]

What happened?

The types for the values returned from useForm and the fomdata in the handleSubmit closure are not correct when u use a computed as initialValue

Reproduction steps

1. goto https://stackblitz.com/edit/vee-validate-computed-initial-values-bug?file=src%2FApp.vue
2. click the submit button, (see tha the data.email is working and data.value.email is not)
3. open a extra teminal at the bottom
4. type vue-tsc --noEmit {enter}
5. see the follwing error (on data.email and not on data.value.email)

 error TS2339: Property 'email' does not exist on type 'ComputedRef<{ email: string; }>'.
16       data.email +

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

error TS2339: Property 'email' does not exist on type 'ComputedRef<{ email: string; }>'.
16       data.email +

### Demo link

https://stackblitz.com/edit/vee-validate-computed-initial-values-bug?file=src%2FApp.vue

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](CONDUCT.md)

[logaretm]

Reactive initial values will be deprecated, as they do not have much use and the recommended way to set initial values is with resetForm.

[olegshibaev]

@logaretm
Since resetField doesn't work if we provide initialValues in useForm #3845 (comment), how are we supposed to set initial values for a single field without reactive initial values?

[logaretm]

You can reset that single field with resetForm:

resetForm({ values: { thatField: 'value' })});

Let me know if that doesn't work. I believe resetField should also work, if it doesn't then it could be something to improve.

[olegshibaev]

@logaretm also, this is a breaking change, since now passing a computed into initialValues leads to a stack overflow https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-fw346y?file=%2Fpackage.json%3A9%2C5

[olegshibaev]

You can reset that single field with resetForm:

this sets all other fields to undefined

https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-kqwp7m?file=%2Fsrc%2FApp.vue%3A16%2C37

I believe resetField should also work, if it doesn't then it could be something to improve.

this breaks meta.dirty of the form

https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-g42d5k?file=%2Fsrc%2FApp.vue%3A28%2C11

[olegshibaev]

And this approach where we change the value of initialValues and rely on the touched state of fields to only reset untouched fields doesn't work either.

Before:

https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-fvmq97?file=%2Fsrc%2FApp.vue%3A33%2C5

Now:

https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-sncw7q?file=%2Fsrc%2FApp.vue%3A28%2C46

And if that's the case, why does this code even exist anymore? https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/src/useForm.ts#L1211 There's no way to call setInitialValues outside of resetForm, and resetForm calls setValues right after, defeating the point of checking for touched fields. Maybe you can expose setInitialValues in form context? Otherwise looks like the only viable option now is to track initial values and the dirty state of the form outside of vee-validate 😕

[olegshibaev]

@logaretm should I open new issues for the call stack overflow and the inability to set an initial value of a single field?

[logaretm]

For the call stack issue, the initial values are no longer allowed to be reactive. But we can add a fallback to unref it so it doesn't crash at least. but the types will reject it as intended.

For the resetField, that should work, so yes that might be a bug.

So yes, feel free to create a couple of issues for those and I will tackle them.

[olegshibaev]

#4564
#4563