Vue - Official extension or vue-tsc version

Vue (Official) 3.3.2

VSCode version

1.121.0

Vue version

3.5.34

TypeScript version

6.0.2

System Info

System:
    OS: Windows_NT x64 10.0.26100
  Binaries:
    Node.js: 22.22.1
    npm: 11.3.0
    pnpm: 10.11.1
  Browsers:
    Chromium: 142.0.7444.265

package.json dependencies

{
 "dependencies": {
    "vue": "^3.5.34"
  },
  "devDependencies": {
    "@types/node": "^24.12.3",
    "@vitejs/plugin-vue": "^6.0.6",
    "@vue/tsconfig": "^0.9.1",
    "typescript": "~6.0.2",
    "vite": "^8.0.12",
    "vue-tsc": "^3.2.8"
  }
}

Steps to reproduce

1. Create a .vue file and import a child component;
2. In <script lang="ts" setup>, write: const data = ref({});
3. In , use the child component with an event listener AND explicit closing tag;<child@register="">
4. Save the file. After the language server loads (~1 second), the semantic highlighting breaks from the ref line downwards.
5. Test variations (All work fine)
   Self-closing with event listener: <child@register="registerDetail" /> ✅ Normal
   Explicit closing without event listener: ✅ Normal
   Explicit closing with normal prop: ✅ Normal

What is expected?

The angle bracket type assertion ref({}) is valid TypeScript syntax. The combination of explicit closing tags and event listeners should not interfere with the script's AST parsing and semantic token calculation.

What is actually happening?

In Vue Official extension v3.3.2, using an angle bracket type assertion like ref({}) in <script setup> breaks semantic highlighting, but ONLY when a component in is used with BOTH an explicit closing tag AND an event listener.
This is a very specific edge case that explains why it's hard to reproduce in minimal fresh projects.

Workarounds

1. Use generic syntax instead: ref({})
2. Use self-closing tags for components with event listeners: <Child @event="" />
3. Downgrade Vue Official extension to v3.3.1

Link to minimal reproduction

https://github.com/chuCxs/bug-vueofficial

Any additional comments?

No response