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

背景

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

// 组件内容


// 页面内容
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