一个莫名其妙的bug element-plus里的el-input校验问题

一个表单里面，包含如下需要填写的内容，具体关注联系电话：

正常思路，在el-form里嵌套el-input，正常流程走，我只需要数字，于是我上网找资料，加了校验，事实证明，这样确实可以是输入数字，无法输入英文字符，但如果我输入过中文字符后（虽然展示不出来），再输入数字，此时是无法输入的到form字段值里的（但能展示），也无法触发校验规则。

<el-form-item label="联系电话" prop="phone">
    <el-input
        v-model="joinForm.phone" 
        placeholder="请输入联系电话"
        maxlength="20"
        oninput="value=value.replace(/[^\d.]/g,'')" />
</el-form-item>

先来解决一下吧，等等再找原因，毕竟当天bug当天解：

<el-form-item label="联系电话" prop="phone">
    <el-input
        v-model="joinForm.phone" 
        placeholder="请输入联系电话"
        maxlength="20"
        @input="onInputPhone" />
</el-form-item>

通过@input绑定输入事件onInputPhone，然后再去给表格字段去赋值，这样就能防止输入中文和英文字符。

function onInputPhone(event: string) {
	let input = event;
	if (input) {
    joinForm.value.phone = input.replace(/[^\d.]/g, "");
	}
}

接下来，来探究一下原因？
第一种解决方案本身是网上搜过来的，但官方文档里本身没有oninput这个api，不确定到底是做什么的（但确实能限制），问题应该是Vue的双向绑定机制和手动修改数据之间存在冲突。