Version

3.2.33

Reproduction link

github.com

Steps to reproduce

With my minimal reproduction repo,

npm install
npm prod

Go to http://localhost:3000/c

click "move to /a" button

What is expected?

Slot:Prop:/c changes to Slot:Props:/a

What is actually happening?

props of slot component is not updated.

Summary of the problem

Basically the sample App has following structure

• PageWithWrapper (defined with render())
  • App.vue
    • slot
      • Page.vue

PageWithWrapper pass prop({path:"/a"}) to App.vue, and it pass the same prop to slot so that Page.vue can receive it.

When props passed to App is changed, I expect Page.vue get updated. But when Page.vue is rendered on server side, update does not work.

Reproducing Conditions

As far as I experimented, this problem has 3 conditions to reproduce.

1. HTML is rendered on server and then, hydration (createSSRApp()) is executed on client side. If same component is rendered only on client side, it works as expected.
2. Slot is used to render the component. If you directly include component in template, it works as expected.
3. This occurs only on production mode. In development build, it works as expected.

Background

I ran into this when I tried vite-plugin-ssr's vue sample. In this sample, plugin's routing functionality is used and it is implemented by changing slot of root component using render().

I can confirm this bug, which is problematic for vite-plugin-ssr users.