Vue 3 + Web Components: @update:open not working while addEventListener does

[yinfoyuan]

I’m trying to use a Web Component in a Vue 3 (<script setup>) project, but I’m facing an issue where the event listener defined via @update:open="handlerOpen" in the template is not triggered , while using addEventListener('update:open', handlerOpen) works as expected.

Here’s the code snippet:
"vue": "^3.5.17"
"vite": "^7.0.4",

<script setup lang="ts">
import { ref, watchEffect, useTemplateRef } from 'vue'
import 'webcomponents/report-form-dialog'

import type ReportFormDialog from 'webcomponents/report-form-dialog'

const open = ref(true)
const dialogRef = useTemplateRef<InstanceType<typeof ReportFormDialog> & HTMLElement>('dialogRef')

function handlerOpen(e: CustomEvent<boolean>) {
  console.log('handlerOpen', e.detail); // Only triggered by addEventListener
}

watchEffect(() => {
  dialogRef.value?.addEventListener('update:open', (e: Event) => handlerOpen(e as CustomEvent<boolean>)) // ✅ Works
});
</script>

<template>
  <!-- ❌ @update:open not triggered -->
  <report-form-dialog 
    ref="dialogRef" 
    .open="open" 
    @update:open="handlerOpen" 
  />
</template>