Validation not re-running when Array items modified directly

[darushton]

What happened?

Having upgraded vee-validate recently, we're seeing an issue in one of our apps around array validation.

When we have an array with a validated shape, if we modify the items directly, validation does not appear to be re-run (initial validation errors are not removed and new validation errors are not generated).

This did work prior to 4.6.0 specifically.

Post 4.6.0, the only thing that seems to trigger validation is creating a new array with copies of the initial items.

I've created a simplified example here:

https://stackblitz.com/edit/vee-validate-v4-array-fields-6fe98t?file=src/App.vue

You'll see that:

• Initially the first user in the list has no name, so a validation error shows
• Clicking 'Clear' next to 'Susan' clears their name, but no validation error shows

If you update package.json to use vee-validate 4.5.11, and then refresh and repeat the above steps, the validation error is shown when clearing 'Susan'.

Is this a bug or have we been relying on something working that shouldn't have previously?

We've resolved in our app by rolling vee-validate back to an earlier version, but have you got any suggestions for a long term solution for us?

Many thanks!

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-array-fields-6fe98t?file=src/App.vue

Code of Conduct

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

[logaretm]

Perhaps this is related to this fix which was introduced in 4.6.

Basically mutating the object like that causes the watcher to see both old and new values as the same one. I will see if a workaround can be implemented. Replacing the entire value works better because they no longer share the same reference.

I will try to see if that's indeed the issue or not.