HMR decouples global state object on hot reload

[iamrgroot]

Redirected from https://github.com/vitejs/vite/issues/8027 to here.

When using global state, in my example just Vue refs with import/export, hot reloading the state and then a component using that state results in multiple decoupled states that result in outdated HTML.

Reproduction

https://github.com/IAmRGroot/reproduction-vite

• npm ci && npm run vite
• edit 'edit_me_first' in compositions/ip.ts, causing a HMR
  • This one works fine and updates all components that use ip.ts
• edit 'edit_me_second' in components/Wrapper.vue causing a HMR
  • The page does not show the updated component but the old one.
  • Vue devtools still shows the old value
  • Refresh fixes it until you edit the composition again

Following the same steps in Vue3 (see the branch https://github.com/IAmRGroot/reproduction-vite/tree/vue3) results in correct behaviour.

[iamrgroot]

Fixed in Vue 2.7 👍