The main issue is, that some files with javascript changes, that are hot reloaded are not executed in the browser. After hrm is triggered, the updated file is visible in the browser, but changed javascript is not reflected in the browser. The interesting thing is, that if the html is changed, it is visible after hot reload, javascript change on the other hand is not.
In the example below, if you change the contents of console.log() in Child.vue and press the child button, the old text is printed out in the console. If you refresh the page the new text is printed out. The issue only occurs if Child is passed to Parent using named slots. If you change the named slot to default, everything works as intended.
The main issue is, that some files with javascript changes, that are hot reloaded are not executed in the browser. After hrm is triggered, the updated file is visible in the browser, but changed javascript is not reflected in the browser. The interesting thing is, that if the html is changed, it is visible after hot reload, javascript change on the other hand is not.
In the example below, if you change the contents of
console.log()inChild.vueand press the child button, the old text is printed out in the console. If you refresh the page the new text is printed out. The issue only occurs ifChildis passed toParentusing named slots. If you change the named slot to default, everything works as intended.Minimal example: https://stackblitz.com/edit/vitejs-vite-zrwiae?file=src/App.vue
The behaviour is also demonstrated in the attached video, where it is clear that changing contents of
console.logis not reflected after hot reload is initiated. https://user-images.githubusercontent.com/1347072/215088747-d948ceab-afe2-47c6-90b6-5ecdc990770f.mp4