Subscribe on changes!

HMR not always working with useSlots and computed

avatar
May 13th 2022

Link to minimal reproduction

https://github.com/Floppy012/vue3-useslots-hmr

Steps to reproduce

  1. 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 and npm 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)
  2. Use useSlots in computed
  3. Change slot content
  4. 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.

avatar
May 14th 2022

HMR only rerender template, not triggerEffects.