Vue warn]: vue3 element Component emit Pass Event Error

vue3 in element component emit pass event error
Report error:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Vue warn]: Extraneous non-emits event listeners (cancel, confirm, modelClose) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
Vue warn]: Extraneous non-emits event listeners (cancel, confirm, modelClose) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
Vue warn]: Extraneous non-emits event listeners (cancel, confirm, modelClose) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.

Sub-component throwing events

 emits: ['cancel', 'confirm', 'modelClose'],
  setup (props, context) {
    const { showDialog } = toRefs(props)
    const show = computed(() => {
      return showDialog.value
    })
    const cancel = () => {
      context.emit('cancel')
    }
    const confirm = () => {
      context.emit('confirm')
    }
    const modelClose = () => {
      context.emit('modelClose')
    }
    return {
      show, cancel, confirm, modelClose
    }

Parent component receives events

`<user-info :showDialog="showDialog" @cancel="showDialog=false" @confirm="showDialog=false" @modelClose="showDialog=false"></user-info>

Read More: