HMR not always working with useSlots and computed
Link to minimal reproduction
https://github.com/Floppy012/vue3-useslots-hmr
Steps to reproduce
- Get a setup that has HMR
- If you use the my reproduction project
- It's using Nuxt3 (this is where I encountered the behavior and it was the fastest to setup)
- Run
npm install
andnpm run dev
- Open localhost:3000 and developer tools
- Change content of any
data-test
-div multiple times (it sometimes works properly and sometimes it doesn't) - Observe (check also the console for the logs of vite hot update and a plain "update" which is printed when
computed
gets executed)
- If you use the my reproduction project
- Use
useSlots
incomputed
- Change slot content
- Sometimes works, sometimes dont
- According to console logs the parent file gets reloaded
- The compute function isn't re-executed
What is expected?
compute
should be re-executed to get the new values
What is actually happening?
compute
isn't re-executed causing the child element not to update properly
System Info
System:
OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Memory: 10.77 GB / 31.29 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Brave Browser: 97.1.34.80
Firefox: 100.0
Any additional comments?
When changing the text using a reactive variable it seems to work properly.