How do I edit values on multiple rows and columns on a table with vue.js

I have this component to show database values of stock information from an API along with other information that are not from the API. I want to be able to update the columns that are not from the API for every stock. And I want to be able to update multiple records with a single update action, not one by one.

This is my code:

<template>
  <jet-form-section @submitted="updateEquitySecurities">
    <template #title> Equity Securities </template>

    <template #description> Update Equity Security Information. </template>

    <template #form>
      <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
        <div
          class="p-6 rounded sm:rounded-lg overflow-x-auto border border-gray-100 dark:border-gray-200 dark:rounded"
        >
          <table class="w-full whitespace-nowrap">
            <thead>
              <tr class="text-left font-bold text-white">
                <th class="bg-blue-500 border-4 p-2 rounded">Name</th>
                <th class="bg-blue-500 border-4 p-2 rounded">Weight</th>
                <th class="bg-blue-500 border-4 p-2 rounded">Tracking Status</th>
                <th class="bg-blue-500 border-4 p-2 rounded">Security Rating</th>
                <th class="bg-blue-500 border-4 p-2 rounded">Target Entry Price</th>
                <th class="bg-blue-500 border-4 p-2 rounded">Target Exit Price</th>
              </tr>
            </thead>
            <tbody>
              <tr
              v-for="equitySecurity in equitySecurities"
              :key="equitySecurity.id"
              class="dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-300 focus-within:bg-blue-100"
            >
              <input
                type="hidden" v-model="form.equitySecurities.id"
              />
              <td class="border-2 p-2">
                {{ equitySecurity.name }}
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities.weight"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities.tracking_status"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities.security_rating"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities.target_entry_price"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities.target_exit_price"
                />
              </td>
            </tr>
            <tr v-if="equitySecurities.length === 0">
              <td class="border-2 p-2" colspan="4">No Equity Security found.</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>

    <template #actions>
      <jet-action-message :on="form.recentlySuccessful" class="mr-3">
        Updated.
      </jet-action-message>

      <jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
        Update
      </jet-button>
    </template>
  </jet-form-section>
</template>

<script setup>
import JetButton from "@/Jetstream/Button.vue"
import JetFormSection from "@/Jetstream/FormSection.vue"
import JetActionMessage from "@/Jetstream/ActionMessage.vue"
import { useForm } from "@inertiajs/vue3"

const prop = defineProps({ equitySecurities: Object })

const form = useForm({
  equitySecurities: prop.equitySecurities.map((equitySecurity) => ({
    id: equitySecurity.id,
    name: equitySecurity.name,
    weight: equitySecurity.weight,
    tracking_status: equitySecurity.tracking_status,
    security_rating: equitySecurity.security_rating,
    target_entry_price: equitySecurity.target_entry_price,
    target_exit_price: equitySecurity.target_exit_price
  }))
});

const updateEquitySecurities = () => {
  form.put(route("securities.update-equity-nse"), {
    preserveScroll: true,
    errorBag: "updateEquitySecurities"
  })
}
</script>

I struggling to get the reactivity to work properly.

Problem I’m facing: (see screenshots)

1. I expect values from the database (where available) to show in the input box, but it doesn’t (I can see a few values I seeded for testing in dev console),
2. When I type in one row, it shows up on all rows,
3. Despite (2), nothing gets sent to the backend when dump the request,
4. When I modify a value in dev console, it doesn’t show up in form but the value gets sent to the backend.

I suspect my reactivity implementation is the culprit and I need help to sort this.