Version

3.2.33

Reproduction link

github.com

Steps to reproduce

1. download code as zip from https://github.com/lingo3d/vue-bug-example-client
2. yarn install & yarn dev
3. open src/App.vue
4. try changing message prop in the outer component, HMR should update your page immediately
5. try changing message props in the child component, you can see that no change occurs until you manually refresh the page

What is expected?

HMR should update the child component when props are changed, just like it does for the parent component

What is actually happening?

HMR fails to update the child component

this phenomenon doesn't occur during dev. It only appears when a library is build using Vite's library mode and uploaded to NPM, and is installed by a client. This presents a huge problem for library authors. You can find the source code and build settings of the test library from here: https://github.com/lingo3d/vue3-bug-example

Correction: this phenomenon doesn't only happen with Vite. The same test library built with @vue/cli exhibits identical behavior.

@lingosandi the vue3-bug-example repo is missing the source. I might be having the same issue demoed at https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue

@lingosandi the vue3-bug-example repo is missing the source. I might be having the same issue demoed at https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue

I've uploaded the code, thanks for catching that

I am also having this issue in Vite. I get the [vite] hot updated: /src/pages/data/category.vue log on my console, yet nothing is updated. I use this with vue-router, so when I change the page and come back, I can see the update.

In the same problem, I use elements-plus, the console has hmr log, but the page will not be updated

Same issue. Using Quasar + Windi + Vite

Using PrimeVue 3's DataTable component, I experience this issue as well. (Was linked here from this).

One workaround I did was to add :key="Date.now()" in the component that wasn't refreshing.

I've had the same issue with nuxt3 + vite + vuetify. In my case adding server: { watch: { usePolling: true, }, }, This solved the problem for me but for the solution that is posted did not work. Is there anyone who have any suggestion?

I've had the same issue with nuxt3 + vite + vuetify. In my case adding server: { watch: { usePolling: true, }, }, This solved the problem for me but for the solution that is posted did not work. Is there anyone who have any suggestion?

It didn't work for me (vue 3 + vite)

Same problem with vue 3 + vite + primevue

Have the same issue, currently doing a migration vue 2 -> 3, application is in compat mode. We have vite 3 + vue 3, polling also doesn't work.

For me the solution by @MilkoEmanuilov worked. But it updates much slower than before.

I tried it too, but it didn’t work for me.

Exactly the same thing happens to me too. When I modify a property of a component, the web page does not refresh it. If I modify any common html element (div, span) it does refresh.

This solution: server: { watch: { usePolling: true, }, }, it didn't work for me.

Versions: vite: 3.1.0 vuejs: 3.2.39

I was playing a bit with the example (https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue) and I discovered that if the properties are associated to a ref variable, the hmr always works, but not with a value expressed in the template

This was what I tried and works:

The Child component with its associated aPropRef property is correctly updated in the browser if its value is changed in