resetForm not resetting fieldArray's correctly

[jason-kingsmill]

What happened?

We have a fairly complex dynamically configured UI (using composition api), sometimes with many hundreds/thousands of fields.
There are a lot of external interactions that have need to resetForm with external data/manipulated data (like calculations between fields etc..) or other integrations triggering data updates.
When this happens, we are calling

resetForm(
    {
        errors: {},
        touched: {},
        values: newData,
        submitCount: 0,
    } as FormState<any>,
    { force: true },
)

Certain types of components that implement useFieldArray aren't receiving updates correctly when this happens. In particular, after resetting form the first time, , it no longer removes. It is mostly visible when using the reproduction steps below.
When we use force: false, the arrays are reset fine, but the primitive fields are not. When using force: true, the primitives are fine but the arrays are not.

What I have since discovered, is if using the Form component for the form, and subsequently using the useFieldArray composable, the above issue occurs. If both the form AND the field array are using composables, then the problem is resolved.

Reproduction steps

Use demo link: https://stackblitz.com/edit/vue3-vite-starter-nwxvg3zn (kindly hacked from another issue - thank you!)

1. Click "Add options", notice a new item added to the array
2. Click "Reset form", the array is reset to the initial values and form updated correctly
3. Click "Add options", notice new item added to the array
4. Click "Reset form". Notice now how the additional array items are not removed.
   ...

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://stackblitz.com/edit/vue3-vite-starter-nwxvg3zn

Code of Conduct

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