Estoy aprendiendo vue js 3 e inercia, pero tengo problemas al mostrar datos de accesorios en mi modelo v desde una forma reactiva, por favor ayúdenme. Gracias

Este es mi código:

 data (props) { const form = reactive ({ invoice_code: props.invoice.invoice_code, customer_name: props.invoice.customer_name, units: [{ unit_quantity: props.invoice.units.unit_quantity, unit_type: props.invoice.units.unit_type, unit_name: props.invoice.units.unit_name, unit_description: props.invoice.units.unit_description, unit_completeness: props.invoice.units.unit_completeness, unit_cost: props.invoice.units.unit_cost, }], }) function update () { Inertia.put(`/invoice/`+ props.invoice.id, form) } return { form, update } }, props: { invoice: Object, }, } };

¿Cómo mostrar estas [unidades] en el modelo v?

funciona cuando uso esto

 unit_quantity: props.invoice.units[0].unit_quantity,

pero esto solo se muestra con el índice [0], no con valores múltiples

 <table> <tr> <th>Qty</th> <th>Unit</th> <th>Unit Name</th> <th>Description</th> <th>Completeness</th> <th>Cost</th> </tr> <tr v-for="(unit, index) in form.units" :key="unit.id"> <td> <input type="number" v-model="unit.unit_quantity"> </td> <td> <select v-model="unit.unit_type"> <option value="Camera">Camera</option> <option value="Phone">Phone</option> <option value="Laptop-PC">Laptop-PC</option> <option value="Other">Other</option> </select> </td> <td> <input type="text" v-model="unit.unit_name"> </td> <td> <input type="text" v-model="unit.unit_description"> </td> <td> <input type="text" v-model="unit.unit_completeness"> </td> <td> <input type="number" v-model="unit.unit_cost"> </td> </tr> </table>

esta es mi plantilla