Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNqVUslu2zAQ/RWWPcgBbBK9qnKAwijQcy+98KJlrCjhhuHIQWH43zsk46BJ0SDRQZj1cebNO8tvMarTCrKVXRpxiSQS0BpvjV9cDEjiLBCO4iKOGJxouLQx/jl5CC7WjJFKZy+DGWm8EMaPwScSLs1in0E2zQ+wNohfAe30qbm5FgT/E/wEeLDL+MClsL89Z4CcDRaUDfPmC1dfjO90HZLHY4fARdsTsCdENy2nl1B7I1/4RpZCQ4a6PKqufZob2er0M5zcyrrfzvVR3afgmZ4yknlKJCNbUSI5VlZu2bgjiqnVOh3HzMN9UgFnzZbC1dPiQEFyuwHDYwJkYCO3f2FoDp4Ad1hGBnwL81XpP7gZlvm68CrXq3z0xPU446ujgKIeZyA1LSn2NN59P4GnjYdHcVgTBVf9pk62K+3NNnOVeR/WYbCQWkG4Au+eYxNQv9hCZ3ZzwIW2qZ01xpvw7+Z9Gkj02wLffujHhxnD6qcWYfo6Bhuw/Xwsn5EslatIyktP4sjyqCs7+J86Ln8AtAQgnw==

Steps to reproduce

1.click div 2.console error

What is expected?

no error

What is actually happening?

Uncaught RangeError: Maximum call stack size exceeded

System Info

No response

Any additional comments?

No response

Here is the correct usage:

// App.vue
<script setup>
import { ref } from 'vue'

import Comp from "./Comp.vue"
  
const msg = ref('Hello World!')
const onRenderClick = e=>{
  console.log(1)
}
</script>

<template>
  <div>
    <Comp @renderClick="onRenderClick"/>
  </div>
</template>

// Comp.vue
<script setup>
import { ref } from 'vue'

const click = e=>{
  e.target.dispatchEvent(new CustomEvent('render-click', {
    bubbles: true,
    detail: {
    demo:'click'
    }
  }))
}
</script>

<template>
  <div style="background:red;color:#ffffff" @click="click">
     click me
  </div>
</template>