HMR does not work with class-components loaded in the router

[Evertvdw]

Hello there, there seems to be a HMR issue when using vue-class-components in Vue3. It seems to have to do with components that are loaded in the routes. I created a codesandbox to reproduce this issue:

https://codesandbox.io/s/fervent-haibt-htft9?file=/src/App.vue

In the 'App.vue' I created a class component in which HMR does work, try changing the text and you see it updated on the screen.
In Index.vue which is put into a router-view in the routes.js file, HMR works when you use the old options syntax, but when you use the class syntax the HMR does not work anymore.

This is of course not a very nice developer experience, can this be fixed?

[hjmmc]

Now I rewrite the webpackHotUpdate method to achieve page auto refresh, of course this is only a temporary fix.

window.webpackHotUpdate = function () {
  window.location.reload()
}

[bamboechop]

HMR not working for components that are loaded via the router is a deal breaking issue for my new projects right now. Can this problem please be acknowledged and either a timeline be given when a fix will be released or at least said that no fix is coming?

[MatthewSH]

Another issue for Quasar was created (quasarframework/quasar#10527) because of this issue. I did some initial work for tracking it down over there (see here: quasarframework/quasar#10527 (comment) ).
Would be nice if the issue was at least acknowledged by the devs.

However, I am concerned that the project is currently sitting inactive on all branches while issues sit open.

[IlCallo]

The problem apparently is into vue-loader itself, see vuejs/vue-loader#1897