Field "dirty" meta lost after child component mounted for the first time

[waddyvic]

What happened?

Hello, I'm using Vee-validate in a Pinia store. My form is quite large and complicated (multiple tabs, some tabs need to access data from other tabs), so I used "useForm" composition API in a Pinia store despite the official Vee-validate doc warned about it.

The symptom I'm seeing is when some form data is programmatically modified by some async logic or user action, initially the form context knows about those fields becoming dirty. However, if the tab that hosts the dirty form fields were never accessed by the user before the change, when user accessed that tab after the fields are dirty, the "dirty" meta got reverted back to false, despite the form data being correct (i.e. showing the modified value). If the user access that "tab" first, then perform some actions to modify the fields programmatically, then the "dirty" meta is properly set to "true". I believe this is due to the limitation of using useForm in a Pinia store, because the child comonents (the "tabs") do not have access to the form context when it calls the onMounted lifecycle hook.

Is there a way to work around it, so that the "dirty" meta stays correct when the child components are mounted after the data has changed? I noticed "useField()" takes in a "form" option that is a FormContext. Will that work to inject the form context to the fields?

Reproduction steps

1. Go to this code sandbox: vee-validate pinia codesandbox
2. Click "Toggle User" to mount the "User" component
3. Click "Change User" to change the values programmatically. Observed the "dirty" for both fields are set to true correctly.
4. Now click refresh to reload the app
5. Click "Change User" to change the values programmatically. Observed the values in the form state has changed.
6. Click "Toggle User" to mount the "User" component. Observed the values are the modified values, but "dirty" meta is still false

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

Demo link

https://codesandbox.io/p/devbox/cffhp8

Code of Conduct

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