Vue3 Composition API: Dyanmic V-model doesn't update view

I'm building an object in my Pinia store like so:

inventory: {
  one: {},
  two: {},
  three: {}
}

And I want to update each property of inventory individually.

NOTE: The above properties are't predefined. I define them via an API call: this.inventory[property] = {...}

To do this, I'm referencing it in my component dynamically (see code and image below). However, on first render, its great, but if I change routes... it doesn't update the view.

Shouldn't it? Any idea how to fix?

Thank you,

<template>
    <q-form class="row column q-gutter-md">
        <PetInventoryForm v-model="inventory[transportType]" />
        <div class="row justify-end">
            <AVButton
                label="Save Changes"
                :disable="processing"
                @click="submit"
            />
        </div>
    </q-form>
</template>

<script setup>
import { watch, computed } from "vue"
import { useRoute } from "vue-router"
import { storeToRefs } from "pinia"
import { useAuthStore } from "../../store/auth"
import { useAirlineStore } from "../../store/airline"
import useForm from "../../composables/useForm"
import PetInventoryForm from "./forms/PetInventoryForm.vue"

const route = useRoute()
const authStore = useAuthStore()
const airlineStore = useAirlineStore()
const { processing, handleFormError } = useForm()

const { airline_id } = storeToRefs(authStore)
const { inventory } = storeToRefs(airlineStore)

const transportType = computed(() => route.params.transportType)

const submit = async () => {
    try {
        processing.value = true
        await airlineStore.savePetInventory(transportType.value)
    } catch (e) {
        handleFormError(e)
    } finally {
        processing.value = false
    }
}

watch(
    () => route.params.transportType,
    (val) => {
        airlineStore.getPetInventory(airline_id.value, val)
    },
    { immediate: true }
)
</script>

PetInventoryForm:

<template>
    <AVRow column>
        <AVRow grid>
            <AVInput
                v-model="form.economy"
                label="Economy"
                type="number"
                :rules="[required, maxNum(50), number]"
            />
        </AVRow>
        <AVRow grid>
            <AVInput
                v-model="form.premiumEconomy"
                label="Premium Economy"
                type="number"
                :rules="[required, maxNum(50), number]"
            />
        </AVRow>
        <AVRow grid>
            <AVInput
                v-model="form.business"
                label="Business"
                type="number"
                :rules="[required, maxNum(50), number]"
            />
        </AVRow>
        <AVRow grid>
            <AVInput
                v-model="form.firstClass"
                label="First Class"
                type="number"
                :rules="[required, maxNum(50), number]"
            />
        </AVRow>
    </AVRow>
</template>

<script setup>
import useValidations from "@/composables/useValidations"
import useForm from "@/composables/useForm"

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {}
    }
})

const { required, number, maxNum } = useValidations()
const { form } = useForm(props)
</script>

UPDATE

The above method does work if I do this in the store:

inventory: {
   PETC: {},
   SVAC: {},
   AVIH: {}
}

Basically predefine the object values... but not something I want to do.