Edit single record from table

I have created a dynamic table who reprezent db.table structure and records. My table structure need to change sometime then i search for the best way to display data on this vue table.

<thead class="">
<tr>
  <th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
  <th v-for="(header, index) in visibleHeaders" :key="index" scope="col">
     {{ header }}
  </th>
  <th>Action</th>
</tr>
</thead>
<tbody>
 <tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
  <td>
   <input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
  </td>
  <td v-for="atr in column">{{atr}}</td>
  <td>
   <a class="btn btn-sm btn-info">View</a>
   <button type="button" class="btn  btn-sm btn-secondary"  data-mdb-toggle="modal" data-mdb-target="#editUserModal" >Edit</button>
   <button type="button" class="btn  btn-sm btn-danger" >Delete</button>
  </td>
</tr>
<tr v-show="!leads.length">
  <td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>

//script
data() {
        return {
            headers: [],
            leads: [],
            field: '',
        }
    },

computed: {
        visibleHeaders() {
            return this.headers.map(h => {
                return h.Field.replace("_", " ").toUpperCase()
            });
        },
        visibileColumn() {
            return this.leads.map(c => {
                // console.log(c)
                return c
            })
        },
    },

methods: {
   getData() {
            axios.get('/leads/getleads')
            .then(response => {
                this.leads = response.data.leads
                this.headers = response.data.headers
                // console.log(response.data.leads)
            })
        },
}

Now i need to edit single record of each record. If this would be with hardcode way i know it is easy but comes to a complecity now i am using dynamci data and dont know how to edit each record

<button @click="editLead(column.id)" type="button" class="btn  btn-sm btn-secondary"  data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
 <i class="fa-solid fa-pen-to-square"></i>
</button>

//edit table record
        editLead(id) {
            axios.get('/leads/'+id+'/edit')
            .then(response => {
                this.editleads = response.data.leads
            })
        },

I have tryed a way but i think there is the problem, maybe i need to pass array on v-modal but i dont know how to pass a value for each input

<div class="modal-body" >
  <form v-for="lead in editleads" id="" class="form-horizontal validate-form">
    <input v-model="editl" type="text" class="form-control my-2 py-2" :placeholder="lead">
  </form>
</div>

Laravel controller edit()

public function edit($id)
    {
        return response()->json([
            'leads' => Lead::find($id)
        ], Response::HTTP_OK);
    }
// there witll be an update function