小程序内嵌vant h5页面，组件触发事件错误

背景

小程序里内嵌的h5单页，框架用的vant3，做选择弹窗的时候封装了一个组件，弹窗里选择支付方式，点击确定触发confirm方法。

// 组件内容
<template lang="pug">
VanDialog(v-model:show='showDialog', title='支付方式', show-cancel-button, @cancel='showDialog = false', @confirm='handleSubmit')
    .pt-4.pb-10.px-8
            .brs-8.bgc-html.mt-6.py-4.px-6.flex.aic.jcb(
            v-for='(item, index) in payList',
            :key='index',
            :class='item.value === payType ? "c-theme" : "c-disabled"',
            @click='payType = item.value'
        )
            .fwb {{ item.label }}
            .iconfont {{ item.value === payType ? "&#xe67f;" : "&#xe72f;" }}
</template>

// 页面内容
ChoosePayType(v-model="showDialog" @confirm="handleSubmit")

const handleSubmit = async (payType: string) => {
    try {
        const { res } = await confirmOrder({ regAppointmentId: orderId.value, payType });
        if (res) {}
    } catch (error) {
        console.log(error);
    }
};

问题

在h5里面表现良好，handleSubmit方法触发一次，可是发到测试之后在小程序里打开发现handleSumit触发了两次。
调试之后发现是由于我的组件里VanDialog放在了根路径上，跟vandialog本身的事件名称一样，所以挂载了两次confirm事件。。。

解决方案

1. 把confirm事件改为onConfirm
2. 根路径加一个div