[Bug Report][3.0.0-beta.2] HMR not getting applied when updating an element in various contexts

[TechAkayy]

Environment

Vuetify Version: 3.0.0-beta.2
Vue Version: 3.2.31
Browsers: Chrome 101.0.4951.64
OS: Mac OS 10.15.7

Steps to reproduce

HMR is mostly not getting applied when updating vuetify tags within v-for loops, and also in various contexts.

In the attached reproduction (please first fork the repo, and then make updates):

• update v-btn's (within v-for loop) color from 'red' to 'green', and save the page, and HMR is not getting applied, and requires page refresh everytime to apply the update.
• the v-slider (not within v-for loop). Try changing the step from '5' to '10', and save file, HMR doesn't apply, and requires page refresh for every atomic update like this.

vuetify-hmr-bug.mp4

I have also tried numerous other scenarios, where HMR mostly is not working well within various contexts. This impacts our DX a lot, especially when working on something (template & style sections, and not script section) where we want the state preserved.

Expected Behavior

HMR should apply correctly when updating vuetify tags within various contexts (eg, v-for loops), at least most of the time (if not 100% of the time)

Actual Behavior

HMR is mostly not getting applied when updating vuetify tags esp for elements within various contexts (eg, v-for loops)

Reproduction Link

https://stackblitz.com/github/TechAkayy/vuetify3-beta-hmr-bug?file=src%2FApp.vue

[KaelWD]

Vue bug, looks like vuejs/core#1942 wasn't fixed properly. vuejs/core#2359 added a check for instance.parent.type.__hmrId but in this case only instance.parent.parent.type.__hmrId is set because v-app is also a non-sfc component.

[TechAkayy]

Good day @KaelWD, just wanted to understand what our protocol is for dealing with upstream bugs like this one.

Does the vuetify team collate bugs under the upstream tag, and raise it with the upstream repo? Or should I create a ticket with vuejs/core for this one?

I have been encountering these kinda HMR issues too frequent, so wondering if vuetify could have some workaround in place while the upstream fix is pending.

Note, I have updated the title of this card, as the HMR issues are not only happening with elements within v-for loops, but rather in various random contexts.

Thanks, have a good day!

[KaelWD]

There's already a pr: vuejs/core#4077
The only workaround would be for you to use patch-package to apply the fix.

[TechAkayy]

Sweet. Thanks for the pointer @KaelWD

[johnleider]

This is being closed because it has little to do with us. Watch vuejs/core#4077 for more relevant updates.

If you have any questions, please reach out to us in our Discord community.