HTML table elements array vuejs3 only first row submitting

Inside vuejs3 I am using following code creating dynamic html inputs but having issues that it didn't submit array of elements in Laravel controller but only first row data.

    <script setup>
    import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
    import Checkbox from '@/Components/Checkbox.vue';
    import { createApp } from 'vue'
    import InputError from '@/Components/InputError.vue';
    import InputLabel from '@/Components/InputLabel.vue';
    import PrimaryButton from '@/Components/PrimaryButton.vue';
    import TextInput from '@/Components/TextInput.vue';
       
    defineProps({
    
            form:useForm
    });
    
    
    </script>
    <script>
    export default {
      data() {
        return {
        tableRows: [
          {
            "id": 1,
         
              remarks: '',
          }
        ]
        }
      },
      methods: {
        insert_Row() {
          this.tableRows.push(
            {
            "id": this.tableRows.length+1,     
              remarks: '',
          }
          )
        }
      }
    }
    </script>
    <template>
        <table>
              <thead>
              
                <tr>
                  <th>Sr#</th>
                  <th>Remarks</th>
                </tr>
              
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableRows" :key="item.id">
                    <td>{{item.id}}</td>
                    <td><input type="text" v-model="item.remarks" @input="form.remarks = $event.target.value"></td>
                </tr>
            </tbody>
        </table>
       <button @click="insert_Row">Add row +</button>
       
    </template>