vant组件表单外部的button触发form表单的submit事件问题

<van-form ref="formData" alidate-first @submit="submit">
      <van-field
           readonly
           v-model="name"
           name="name"
           label="姓名"
       />
</van-form>

<button type="submit"  @click="send">外部提交</button>

send(){
   this.$refs.formData.submit();
},

<template>
    <div class="result">
         <van-form ref="formData" alidate-first @submit="submit">
             <van-field
                 readonly
                 v-model="name"
                 name="name"
                 label="姓名"
             />
             <van-field
                 readonly
                 v-model="idNumber"
                 name="idNum"
                 label="身份证号码"
             />
             <van-field
                 readonly
                 v-model="phoneNumber"
                 name="phone"
                 label="手机号"
             />
         </van-form>
         <button type="submit"  @click="send">外部提交按钮</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        submit(values){
            //提交事件的逻辑
            console.log(values) //values为表单中van-field的值
        },
        send(){
            this.$refs.formData.submit();
        },
    }
}
</script>
<style>
 
</style>

<van-button native-type="button">
  发送验证码
</van-button>