Making an array reactive in vue Composition API - vuejs3

Question

This seems simple but I could not find an answer. I have a form and all inputs are put in an object. Now the backend requires the form object to be wrapped in an array. So I have this :
<input
class="input"
placeholder="Serial #"
v-model="form.serialNum"
/>
// etc for form
and in <script setup>
let form = reactive({
eqpmntType: "",
make: "",
modelNum: "",
// etc
So I read docs and understand reactive function is for objects so I tried ref():
let form = ref([{
eqpmntType: "",
make: "",
modelNum: "",
//etc
}]
And unfortunately I lose my reactivity for the form inputs. I know I can wrap the form object in an array after the fact and submit. I was wondering if there is a way to make an array or for that matter an array of objects reactive. Thanks for any clarification.

Answer 1

I think your initiated form is reactive and have no problem to me. Maybe it is how you use it.
For example, if you want to alter the value of modelNum within form, since it is an Array type now, make sure you did this:
form.value[0].modelNum = 123
And in the input element, the v-model should be v-model="form[0].modelNum" also because of type Array.
Althogh I don't see why the backend requires you to pass Array-type params since it seems form only contains 1 Object within the array. Normally, in below case, Array-type params will be adopted:
const form = ref([
{
eqpmntType: "1",
make: "1",
modelNum: "1"
},
{
eqpmntType: "2",
make: "2",
modelNum: "2"
},
{
eqpmntType: "3",
make: "3",
modelNum: "3"
},
])
In this case, your input must be more than one so that each v-model of one input will bind each modelNum respectively. So if this answer doesn't solve your problem, I would like you to display more code and details.