Version

3.2.26

Reproduction link

github.com

Steps to reproduce

1. Build a library using either rollup-vue/vite.
2. The lib has to have a component that has a slot.
3. Import the components in a clean project vite/vue-cli.
4. Wrap the child component inside the parent component that has the slot.
5. Add a style/class tag to the child component and modify the contents with HMR on.

What is expected?

The child would have the style/class updated in the dom.

What is actually happening?

No changes are happening unless you reload the page.

This might happen with other properties as well. I just got around testing in with these 2 (style/class). I'm also including an app that consumes the test library linked above https://github.com/horia16/vue-broken-hmr

To explain further, this only happens if the library is build, not during development and only when a child component is placed inside a parent slot.

Another behavior that I discovered is that, while HMR is running if we move the component out of that parent component and back in the HMR fixes itself.

Dynamic binding does not work either. (v-bind)

I have uploaded an example video just to explain the behavior better. https://user-images.githubusercontent.com/32731652/145868046-35f546df-8125-4312-9a29-d05df678b306.mp4