If devtool is different and hmr updates different file ranges, vue ref will lose state, I don't know why

[skywalker512]

https://github.com/skywalker512/rspacksse-lite
pnpm dev
change src/pages/index.vue

when devtool is false

the change file is

• ./src/pages/index.vue?vue&type=template&id=57509004&ts=true

self['hotUpdate']('src_pages_index_vue', {
"./src/pages/index.vue?vue&type=template&id=57509004&ts=true": function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "render", {
    enumerable: true,
    get: function() {
        return render;
    }
});
var _vueRuntimeEsmBundlerJs = __webpack_require__("./node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js");
const _hoisted_1 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("div", {
    class: "i-carbon-campsite text-4xl inline-block"
}, null, -1);
const _hoisted_2 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("p", null, [
    (0, _vueRuntimeEsmBundlerJs.createElementVNode)("a", {
        rel: "noreferrer",
        href: "https://github.com/skywalker512/rspacksse-lite",
        target: "_blank"
    }, " Rspacksse Lite ")
], -1);
const _hoisted_3 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("p", null, [
    (0, _vueRuntimeEsmBundlerJs.createElementVNode)("em", {
        class: "text-sm opacity-75 t111"
    }, "Opinionated Rspack Starter Template")
], -1);
const _hoisted_4 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("div", {
    class: "py-4"
}, null, -1);
const _hoisted_5 = [
    "disabled"
];
function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (0, _vueRuntimeEsmBundlerJs.openBlock)(), (0, _vueRuntimeEsmBundlerJs.createElementBlock)("div", null, [
        _hoisted_1,
        _hoisted_2,
        _hoisted_3,
        _hoisted_4,
        (0, _vueRuntimeEsmBundlerJs.createVNode)($setup["TheInput"], {
            modelValue: $setup.name,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>$setup.name = $event),
            placeholder: "What's your name?",
            autocomplete: "false",
            onKeydown: (0, _vueRuntimeEsmBundlerJs.withKeys)($setup.go, [
                "enter"
            ])
        }, null, 8, [
            "modelValue",
            "onKeydown"
        ]),
        (0, _vueRuntimeEsmBundlerJs.createElementVNode)("div", null, [
            (0, _vueRuntimeEsmBundlerJs.createElementVNode)("button", {
                class: "m-3 text-sm btn",
                disabled: !$setup.name,
                onClick: $setup.go
            }, " Go ", 8, _hoisted_5)
        ])
    ]);
}
},

});

when devtool is source-map

the change file is

• ./src/pages/index.vue?vue&type=script&setup=true&lang=ts
• ./src/pages/index.vue?vue&type=template&id=57509004&ts=true

self['hotUpdate']('src_pages_index_vue', {
"./src/pages/index.vue?vue&type=script&setup=true&lang=ts": function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "default", {
    enumerable: true,
    get: function() {
        return _default;
    }
});
var _vueRuntimeEsmBundlerJs = __webpack_require__("./node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js");
var _vueRouterMjs = __webpack_require__("./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-router/dist/vue-router.mjs");
var _theInputVue = __webpack_require__.ir(__webpack_require__("./src/components/TheInput.vue"));
var _default = (0, _vueRuntimeEsmBundlerJs.defineComponent)({
    __name: 'index',
    setup (__props, { expose  }) {
        expose();
        const name = (0, _vueRuntimeEsmBundlerJs.ref)('');
        const router = (0, _vueRouterMjs.useRouter)();
        const go = ()=>{
            if (name.value) router.push(`/hi/${encodeURIComponent(name.value)}`);
        };
        const __returned__ = {
            name,
            router,
            go,
            TheInput: _theInputVue.default
        };
        Object.defineProperty(__returned__, '__isScriptSetup', {
            enumerable: false,
            value: true
        });
        return __returned__;
    }
});
},
"./src/pages/index.vue?vue&type=template&id=57509004&ts=true": function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "render", {
    enumerable: true,
    get: function() {
        return render;
    }
});
var _vueRuntimeEsmBundlerJs = __webpack_require__("./node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js");
const _hoisted_1 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("div", {
    class: "i-carbon-campsite text-4xl inline-block"
}, null, -1);
const _hoisted_2 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("p", null, [
    (0, _vueRuntimeEsmBundlerJs.createElementVNode)("a", {
        rel: "noreferrer",
        href: "https://github.com/skywalker512/rspacksse-lite",
        target: "_blank"
    }, " Rspacksse Lite ")
], -1);
const _hoisted_3 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("p", null, [
    (0, _vueRuntimeEsmBundlerJs.createElementVNode)("em", {
        class: "text-sm opacity-75 t111"
    }, "Opinionated Rspack Starter Template")
], -1);
const _hoisted_4 = (0, _vueRuntimeEsmBundlerJs.createElementVNode)("div", {
    class: "py-4"
}, null, -1);
const _hoisted_5 = [
    "disabled"
];
function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (0, _vueRuntimeEsmBundlerJs.openBlock)(), (0, _vueRuntimeEsmBundlerJs.createElementBlock)("div", null, [
        _hoisted_1,
        _hoisted_2,
        _hoisted_3,
        _hoisted_4,
        (0, _vueRuntimeEsmBundlerJs.createVNode)($setup["TheInput"], {
            modelValue: $setup.name,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>$setup.name = $event),
            placeholder: "What's your name?",
            autocomplete: "false",
            onKeydown: (0, _vueRuntimeEsmBundlerJs.withKeys)($setup.go, [
                "enter"
            ])
        }, null, 8, [
            "modelValue",
            "onKeydown"
        ]),
        (0, _vueRuntimeEsmBundlerJs.createElementVNode)("div", null, [
            (0, _vueRuntimeEsmBundlerJs.createElementVNode)("button", {
                class: "m-3 text-sm btn",
                disabled: !$setup.name,
                onClick: $setup.go
            }, " Go ", 8, _hoisted_5)
        ])
    ]);
}
},

});

[IWANABETHATGUY]

@underfin

[underfin]

@skywalker512 This is a vue-loader bug with webpack5, so rspack also meet this case. Please track here vuejs/vue-loader#1795, i will discuss it with @sodatea.