Vue 3 with Vuex: Best way to handle single-record view/edit pages

I am still familiarizing myself with Vue3 and Vuex so I may be missing something obvious, but I haven’t been able to find any good examples.

Imagine a basic app like the below:

Route definition

{
    path: "/products/:id/view",
    name: "ViewProduct",
    component: ViewProduct,
    props: true
}

Component

defineComponent({
    props: {
        id: {
            type: String,
            required: true
        }
    },
    setup(props) {
        // dispatch store action (async) to fetch record and add to store
        productStore.dispatch("fetchProduct", props.id)

        // read from store getter to get data
        const product = reactive(product.byId(props.id))
        
        return {
            product
        }
    }
})

Now, clearly I have a problem here, because the record I’m trying to view will be undefined when the component is mounted, and may well be undefined period, i.e. if the user navigates to a URL for which a record does not exist. My question is what (or where) the best way to handle this? The official Vuex documentation says to use computed properties for accessing store state, which works fine if you just need to read from the state. But what if you need to make a reactive local copy of the store state for form editing?