diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index 14cd33ca..dad3be6e 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -9,6 +9,7 @@ import type {
   SFCTemplateCompileOptions,
 } from 'vue/compiler-sfc'
 import type * as _compiler from 'vue/compiler-sfc'
+import type { ExistingRawSourceMap } from 'rollup'
 /* eslint-enable import/no-duplicates */
 import { computed, shallowRef } from 'vue'
 import { version } from '../package.json'
@@ -259,10 +260,13 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
           refTransformFilter.value(filename) &&
           options.value.compiler.shouldTransformRef(code)
         ) {
-          return options.value.compiler.transformRef(code, {
+          const result = options.value.compiler.transformRef(code, {
             filename,
             sourceMap: true,
           })
+          return result as Omit<typeof result, 'map'> & {
+            map: ExistingRawSourceMap | null
+          }
         }
         return
       }
diff --git a/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/playground/ssr-vue/__tests__/ssr-vue.spec.ts
index 497c5e6d..621f1bf9 100644
--- a/playground/ssr-vue/__tests__/ssr-vue.spec.ts
+++ b/playground/ssr-vue/__tests__/ssr-vue.spec.ts
@@ -41,16 +41,16 @@ test('/about', async () => {
   if (isBuild) {
     // assert correct preload directive generation for async chunks and CSS
     expect(aboutHtml).not.toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/Home-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/Home-[-\w]{8}\.js"/,
     )
     expect(aboutHtml).not.toMatch(
-      /link rel="stylesheet".*?href="\/test\/assets\/Home-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="\/test\/assets\/Home-[-\w]{8}\.css"/,
     )
     expect(aboutHtml).toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/About-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/About-[-\w]{8}\.js"/,
     )
     expect(aboutHtml).toMatch(
-      /link rel="stylesheet".*?href="\/test\/assets\/About-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="\/test\/assets\/About-[-\w]{8}\.css"/,
     )
   }
 })
@@ -72,13 +72,13 @@ test('/external', async () => {
   if (isBuild) {
     // assert correct preload directive generation for async chunks and CSS
     expect(externalHtml).not.toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/Home-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/Home-[-\w]{8}\.js"/,
     )
     expect(externalHtml).not.toMatch(
-      /link rel="stylesheet".*?href="\/test\/assets\/Home-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="\/test\/assets\/Home-[-\w]{8}\.css"/,
     )
     expect(externalHtml).toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/External-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/External-[-\w]{8}\.js"/,
     )
   }
 })
@@ -97,23 +97,23 @@ test('/', async () => {
   if (isBuild) {
     // assert correct preload directive generation for async chunks and CSS
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/Home-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/Home-[-\w]{8}\.js"/,
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="\/test\/assets\/Home-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="\/test\/assets\/Home-[-\w]{8}\.css"/,
     )
     // JSX component preload registration
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/Foo-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/Foo-[-\w]{8}\.js"/,
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="\/test\/assets\/Foo-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="\/test\/assets\/Foo-[-\w]{8}\.css"/,
     )
     expect(html).not.toMatch(
-      /link rel="modulepreload".*?href="\/test\/assets\/About-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="\/test\/assets\/About-[-\w]{8}\.js"/,
     )
     expect(html).not.toMatch(
-      /link rel="stylesheet".*?href="\/test\/assets\/About-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="\/test\/assets\/About-[-\w]{8}\.css"/,
     )
   }
 })
@@ -139,7 +139,7 @@ test('asset', async () => {
   })
   const img = await page.$('img')
   expect(await img.getAttribute('src')).toMatch(
-    isBuild ? /\/test\/assets\/logo-\w{8}\.png/ : '/src/assets/logo.png',
+    isBuild ? /\/test\/assets\/logo-[-\w]{8}\.png/ : '/src/assets/logo.png',
   )
 })
 
@@ -200,7 +200,7 @@ test.runIf(isBuild)('dynamic css file should be preloaded', async () => {
   await page.goto(url)
   const homeHtml = await (await fetch(url)).text()
   const re =
-    /link rel="modulepreload".*?href="\/test\/assets\/(Home-\w{8}\.js)"/
+    /link rel="modulepreload".*?href="\/test\/assets\/(Home-[-\w]{8}\.js)"/
   const filename = re.exec(homeHtml)[1]
   const manifest = (
     await import(
diff --git a/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts b/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
index 2c640709..63fce40c 100644
--- a/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
+++ b/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
@@ -3,7 +3,7 @@ import { isBuild, page } from '~utils'
 
 test('should render', async () => {
   const expected = isBuild
-    ? /assets\/asset-[\da-f]+\.png/
+    ? /assets\/asset-[-\w]+\.png/
     : 'http://localhost/server-origin/test/assets/asset.png'
 
   expect(await page.getAttribute('img', 'src')).toMatch(expected)
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index f8e9a4ba..48a43be8 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -127,7 +127,7 @@ describe('css modules', () => {
 
 describe('asset reference', () => {
   const assetMatch = isBuild
-    ? /\/assets\/asset-\w{8}\.png/
+    ? /\/assets\/asset-[-\w]{8}\.png/
     : '/assets/asset.png'
 
   test('should not 404', () => {
@@ -164,7 +164,7 @@ describe('asset reference', () => {
 
   test('relative url from <style>', async () => {
     const assetMatch = isBuild
-      ? /\/assets\/asset-\w{8}\.png/
+      ? /\/assets\/asset-[-\w]{8}\.png/
       : '/assets/asset.png'
     expect(await getBg('.relative-style-url')).toMatch(assetMatch)
   })