useFieldArray's remove method is triggered twice when removing many fields consecutively

[wJoenn]

What happened?

I made a relatively simple Array input component with useFieldArray and each row has a delete button to remove the row from the input if desired.

<template>
  <div>
    <div v-for="(field, index) in fields" :key="field.key">
      <div>
        <slot :index />
        <button @click="handleRemove(index)">delete</button>
      </div>
    </div>

    <button @click="push(props.template)">add</button>
  </div>
</template>

<script setup lang="ts">
  import { useFieldArray } from "vee-validate"

  const props = defineProps<{
    name: string
    template: Record<string, unknown>
  }>()

  const { fields, push, remove } = useFieldArray(props.name)

  const handleRemove = (index: number) => {
    console.log("clicked")
    remove(index)
  }
</script>

The problem is, once I have more than 5 fields and I start removing some in order, some fields are removed in pair as shown in this video. Button is clicked thrice but 4 fields are removed.

VeeValidate.-.Brave.2024-04-07.11-06-20.mp4

Reproduction steps

1. Add 5 fields or more to a FieldArray
2. Remove them one by one by always deleting at the same index (for example always the first field)
3. Notice how some clicks remove 2 fields at once

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

I have not been able to reproduce this bug sadly... Not sure what was different

Code of Conduct

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