Prop value that is initialized as undefined is not updating the child route when bound to router-view in production mode

[mmrpm]

Version

4.0.12

Reproduction link

github.com

Steps to reproduce

1. Download GitHub repo, npm install, npm run build, npm run prod, open in browser
2. Wait 300ms for exampleRef to get a value
3. Click "Go to route2"
4. See that the exampleRef prop is undefined

What is expected?

In development mode and production mode, when a ref that is initialized as undefined is passed into router-view as a prop and then updated to have a value, I expect that the child route will receive the updated prop value.

What is actually happening?

In production mode, when a ref that is initialized as undefined is passed into router-view as a prop and then updated to have a value, the child route only receives undefined, which is the value that the ref was initialized as.

---

I was updating from Vue 3.0 to Vue 3.2 and noticed that refs that are initialized as undefined and bound to router-view were not behaving correctly in production mode. I cannot repro this another way, such as using dynamic components, and believe it is something specific to router-view.

[posva]

It's interesting it works in development because it shouldn't work in both environments. This is because RouterView has to rely on attrs to pass arbitrary props to the component it renders. The issue here is attrs is non-reactive, thus you won't see any updates. The correct way to do this is by using the v-slot syntax:

<router-view v-slot="{ Component }">
  <component :is="Component" :custom-prop="prop" />
</router-view>

I think this is worth a mention in the docs at https://next.router.vuejs.org/api/#router-view-s-v-slot

[skirtles-code]

I believe the underlying problem in Vue Core was fixed in vuejs/core#5017, released in 3.2.24.

I wonder whether this issue can now be closed? The current Router docs show the correct way to pass a prop at https://router.vuejs.org/guide/essentials/passing-props.html#Via-RouterView.