update index or push new object to reactive array

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.