From f29d6083580e95b4d4b02233548f6ed978a541a5 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Mon, 14 Jul 2025 01:25:15 +0800
Subject: [PATCH 1/3] fix(compiler-vapor): replace colons with underscores in
 cached variable name

---
 .../transforms/__snapshots__/vOn.spec.ts.snap | 22 +++++++++++++++++++
 .../__tests__/transforms/vOn.spec.ts          |  8 +++++++
 .../src/generators/component.ts               |  1 +
 3 files changed, 31 insertions(+)

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
index dd00e552675..671bf5c71a0 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
@@ -12,6 +12,17 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`v-on > component event with argument 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+  const _component_Foo = _resolveComponent("Foo")
+  const _on_update_model = () => {}
+  const n0 = _createComponentWithFallback(_component_Foo, { "onUpdate:model": () => _on_update_model }, null, true)
+  return n0
+}"
+`;
+
 exports[`v-on > dynamic arg 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)
@@ -123,6 +134,17 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 }"
 `;
 
+exports[`v-on > event with argument 1`] = `
+"import { on as _on, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  _on(n0, "update:model", e => _ctx.test(e))
+  return n0
+}"
+`;
+
 exports[`v-on > expression with type 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)
diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
index aca88c791b8..45c768a358c 100644
--- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
@@ -695,4 +695,12 @@ describe('v-on', () => {
     expect(code).matchSnapshot()
     expect(code).include('n0.$evtclick = e => _ctx.handleClick(e)')
   })
+
+  test('component event with argument', () => {
+    const { code } = compileWithVOn(`<Foo @update:model="() => {}"/>`)
+
+    expect(code).matchSnapshot()
+    expect(code).contains('const _on_update_model = () => {}')
+    expect(code).contains('{ "onUpdate:model": () => _on_update_model }')
+  })
 })
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
index 10705a2c795..8cb60f3556b 100644
--- a/packages/compiler-vapor/src/generators/component.ts
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -102,6 +102,7 @@ export function genCreateComponent(
 
 function getUniqueHandlerName(context: CodegenContext, name: string): string {
   const { seenInlineHandlerNames } = context
+  name = name.replace(':', '_')
   const count = seenInlineHandlerNames[name] || 0
   seenInlineHandlerNames[name] = count + 1
   return count === 0 ? name : `${name}${count}`

From 610c1e843a4964bac993fd804a035d45bde773b6 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Tue, 15 Jul 2025 10:02:45 +0800
Subject: [PATCH 2/3] chore: use genVarName

---
 packages/compiler-vapor/src/generators/component.ts  | 4 ++--
 packages/compiler-vapor/src/generators/expression.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
index 8cb60f3556b..fb76abaa505 100644
--- a/packages/compiler-vapor/src/generators/component.ts
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -26,7 +26,7 @@ import {
   genCall,
   genMulti,
 } from './utils'
-import { genExpression } from './expression'
+import { genExpression, genVarName } from './expression'
 import { genPropKey, genPropValue } from './prop'
 import {
   type SimpleExpressionNode,
@@ -102,7 +102,7 @@ export function genCreateComponent(
 
 function getUniqueHandlerName(context: CodegenContext, name: string): string {
   const { seenInlineHandlerNames } = context
-  name = name.replace(':', '_')
+  name = genVarName(name)
   const count = seenInlineHandlerNames[name] || 0
   seenInlineHandlerNames[name] = count + 1
   return count === 0 ? name : `${name}${count}`
diff --git a/packages/compiler-vapor/src/generators/expression.ts b/packages/compiler-vapor/src/generators/expression.ts
index aa7edf658f5..c70d4a56613 100644
--- a/packages/compiler-vapor/src/generators/expression.ts
+++ b/packages/compiler-vapor/src/generators/expression.ts
@@ -647,7 +647,7 @@ function parseExp(context: CodegenContext, content: string): Node {
   return parseExpression(`(${content})`, options)
 }
 
-function genVarName(exp: string): string {
+export function genVarName(exp: string): string {
   return `${exp
     .replace(/[^a-zA-Z0-9]/g, '_')
     .replace(/_+/g, '_')

From 1920cdd11d86f63ced9589ad879c21eb13ca5d58 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Tue, 15 Jul 2025 10:12:58 +0800
Subject: [PATCH 3/3] chore: update

---
 .../transforms/__snapshots__/vOn.spec.ts.snap | 19 ++++++-------------
 .../__tests__/transforms/vOn.spec.ts          | 10 +++++++---
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
index 671bf5c71a0..e7a2b30e69c 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
@@ -12,13 +12,17 @@ export function render(_ctx) {
 }"
 `;
 
-exports[`v-on > component event with argument 1`] = `
+exports[`v-on > component event with special characters 1`] = `
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
 export function render(_ctx) {
   const _component_Foo = _resolveComponent("Foo")
   const _on_update_model = () => {}
-  const n0 = _createComponentWithFallback(_component_Foo, { "onUpdate:model": () => _on_update_model }, null, true)
+  const _on_update_model1 = () => {}
+  const n0 = _createComponentWithFallback(_component_Foo, {
+    "onUpdate:model": () => _on_update_model, 
+    "onUpdate-model": () => _on_update_model1
+  }, null, true)
   return n0
 }"
 `;
@@ -134,17 +138,6 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 }"
 `;
 
-exports[`v-on > event with argument 1`] = `
-"import { on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
-
-export function render(_ctx) {
-  const n0 = t0()
-  _on(n0, "update:model", e => _ctx.test(e))
-  return n0
-}"
-`;
-
 exports[`v-on > expression with type 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)
diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
index 45c768a358c..963f46ad2a3 100644
--- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
@@ -696,11 +696,15 @@ describe('v-on', () => {
     expect(code).include('n0.$evtclick = e => _ctx.handleClick(e)')
   })
 
-  test('component event with argument', () => {
-    const { code } = compileWithVOn(`<Foo @update:model="() => {}"/>`)
+  test('component event with special characters', () => {
+    const { code } = compileWithVOn(
+      `<Foo @update:model="() => {}" @update-model="() => {}" />`,
+    )
 
     expect(code).matchSnapshot()
     expect(code).contains('const _on_update_model = () => {}')
-    expect(code).contains('{ "onUpdate:model": () => _on_update_model }')
+    expect(code).contains('const _on_update_model1 = () => {}')
+    expect(code).contains('"onUpdate:model": () => _on_update_model')
+    expect(code).contains('"onUpdate-model": () => _on_update_model1')
   })
 })