update index or push new object to reactive array - laravel

Question

I have a reactive array that I am trying to determine the best way to handle. It's a standard add/remove but one of the 3 fields that is part of that add/remove section updates one of the others. 1 field is a service the other is the quantity of that service and the third totals the service price + quantity = that field price.
I am having issues working on the indexing and I can't wrap my head around it.
relavent HTML
<div class="col-span-6 gap-4">
<div class="grid grid-cols-6 gap-6" v-for="(service, index) in form.services" :key="index">
<div class="col-span-3 gap-4">
<Label for="service" value="Service" :class="[form.zip_codes == '' ? disableLabel : '']"/>
<v-select label="serviceData" :options="servicesData" v-model="service[index]"
:disabled="form.zip_codes == ''"
class="mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm">
</v-select>
<InputError :message="form.errors.services" class="mt-2"/>
</div>
<div class="col-span-1 gap-4">
<Label for="quantity" value="Quantity" :class="[form.zip_codes == '' ? disableLabel : '']"/>
<Input id="quantity" v-model="service.quantity" type="number" class="mt-1 block w-full"
:disabled="form.zip_codes == ''"
autocomplete="phone_2"
#change="calculatePrice($event.target.value, service[index], index)"/>
<InputError :message="form.errors.quantity" class="mt-2"/>
</div>
<div class="col-span-2 gap-4">
<Label for="price" value="Price"/>
<Input id="price" v-model="servicePrice[index]" type="text" class="mt-1 block w-full" disabled
:disabled="form.zip_codes == ''"
autocomplete="phone_2"/>
<InputError :message="form.errors.quantity" class="mt-2"/>
</div>
<SecondaryButton #click="removeService(index)">Remove</SecondaryButton>
</div>
<div class="pt-5">
<SecondaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
type="button"
#click="addServices()"
>
Add Services
</SecondaryButton>
</div>
my main focus is calculatePrice()
defineProps({
zip_codes: Object,
appointment_types: Array,
servicesData: Object
})
const servicePrice = reactive([])
const calculatePrice = (quantity, service, index) => {
servicePrice.push( Math.round((quantity * service.price) * 100) / 100);
}
As you can see I can push a new value to it but I am not sure how to set it to the correct index. I tried servicePrice[index] but it just returns -1.

Answer 1

Ref or Recative are instantaneous changing values.
You can watch the relevant fields with watch, if there is a change, you can make the calculation.
watch(() => servicePrice.value ,() => {
servicePrice.value = Math.round((quantity * service.price) * 100) / 100;
})