Vue version

3.2.37

Link to minimal reproduction

https://github.com/nosfair-fma/nuxt3-stencil-interop

Steps to reproduce

• run "yarn bootstrap && yarn dev"
• open "http://localhost:3000"
• preferably, open dev-tools
• click the button that says "click to raise events"

What is expected?

• an event for the "lowercaseevent" should be raised and logged to the console through the "@event" bound handler
• an event for the "camelCaseEvent" should be raised and logged to the console through the "@event" bound handler
• an event for the "camelCaseEvent" should be raised and logged to the console through the native "Element.addEventListener" bound handler

What is actually happening?

• the lowercase event works
• the camelCase event does not work with the "@event" syntax
• the camelCase event does get logged for the "native eventListener" (to prove that it is raised and generally working, but also to show the details of the CustomEvent that is emitted)

since i was not able to find any information about naming restrictions (quite the opposite, camelCase event names seem to be standard, widely used and even advertised on the respective vue documentation), i consider this a bug

System Info

System:
    OS: Linux 5.13 elementary OS 6.1 Jólnir
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 23.09 GB / 31.16 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash

Any additional comments?

• the web component in qustion is built with StencilJS, it's functionality is confirmed to work outside of VueJs scopes
• i am using nuxt, but i am pretty certain that this is vue-related since the event binding is a documented vue feature - if not, i am sorry
• all necessary code is to be found in nuxt-app/app.vue

check if this may be related https://github.com/vuejs/core/issues/5401

if it is, there are work arounds suggested in comments.

yes, the workaround with the custom directive seems to work fine - thank you! :)