How to get values of dynamically generated input fields vue.js - vuejs3

Question

I have input fields that are generated dynamically when user clicks the Add button.
How can I get all the values from the inputs
Image
[1]: https://i.stack.imgur.com/keCxy.png
Here is my Code
<tr data-id="1">
<td style="width: 80px">1.</td>
<td>
<input v-model="firstNameKin" type="text " class="form-control " placeholder="Enter First name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" title="Select Relationship">
<option value="">Father</option>
<option value="">Mother</option>
<option value="">Sister</option>
</select>
</td>
<td></td>
</tr>
<tr class="cloneCharges d-none">
<td style="width: 80px " class="categoryIndex ">#</td>
<td>
<input v-model="firstNameKin" type="text " class="form-control " placeholder="Enter First name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td class="">
<input type="text " class="form-control " placeholder="Enter middle name" spellcheck="false" data-ms-editor="true">
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" title="Select Relationship">
<option value="">Father</option>
<option value="">Mother</option>
<option value="">Sister</option>
</select>
</td>
<td class="text-right cell-change d-flex align-items-center justify-content-end">
<a class="btn btn-light btn-rounded waves-effect btn-circle btn-transparent cancel-new-category-2 " title="Cancel "><i class="bx bx-x "></i></a>
</td>
</tr>
Here is the script code that am trying to fetch the values from
data(){
return{
firstNameKin:[]
}
}