Form and useFieldArray not work together

[ngthtung]

What happened?

follow the demo code, we don't use form as tag, we use Form import from vee-validate, and value seems not to reactive

<template>
  <Form @submit="onSubmit">
    <div v-for="(field, idx) in fields" :key="field.key">
      <Field :name="`links[${idx}].url`" type="url" />
      <button type="button" @click="remove(idx)">Remove</button>
    </div>
    <button type="button" @click="push({ url: '' })">Add</button>
    <button>Submit</button>
  </Form>
</template>
<script setup>
import { Field, Form, useForm, useFieldArray } from 'vee-validate';
const { handleSubmit } = useForm({
  initialValues: {
    links: [{ id: 1, url: 'https://github.com/logaretm' }],
  },
});
const { remove, push, fields } = useFieldArray('links');
const onSubmit = handleSubmit((values) => {
  console.log(JSON.stringify(values, null, 2)); // values not update
});
</script>

Reproduction steps

1. 2. 3. ...

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-global-rules-arwe9g?file=src%2FApp.vue

Code of Conduct

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

[logaretm]

You should not use both Form and useForm at the same time. Form is just a component that calls useForm internally.

What happens in your example is you create 2 forms with the Form component being the owner of that state rather than the form context created with useForm.

use a form element instead and your code will work as expected, the Form component also render a form tag by default anyways.