Field value is getting pushed to wrong array

In a vue app form, I have two text inputs and a file input.

What I want to happen: The text inputs should go into a fieldHeader array, and the file input should go into the fieldsArray array.

What does happen: Both text fields and the file input go into both the fieldHeader and the fieldsArray. The console.log for both arrays after clicking “add field” is 0: {field: 0, name: ‘text’, desc: ‘text’, imgOne: File}. It should be fieldHeader: 0: {field: 0, name: ‘text’, desc: ‘text’} and fieldsArray: 0: {imgOne: File}

I would think the v-model would push the items into the correct arrays, but that’s not it. The think I am working through now is to restructure the v-for as that’s the only place where I can currently see the code as mixing the two array concepts.

<template>
  <div v-for="(field, i) in fieldsArray"  :key="i" >
   <q-input
      label="Name"
      v-model="fieldHeader[i].name"
      type="text"
      dense
    />
    <q-input
      v-model="fieldHeader[i].desc"
      type="textarea"
   />
    <q-file
      v-model="fieldArray[i].imgOne"
      @update:model-value="onSelected()"
    ></q-file>
 </div>
 <div @click="handleAddField">Add Field</div>
</template>


<script>
const handleAddFields = () => {
  let i = fieldsArray.value.length;

  const item = {
    field: i,
  };
  fieldHeader.value.push(item);
  fieldsArray.value.push(item);
  
};
</script>