自定义指令如何修改v-model绑定的值

今天想做这样一件事 给input添加验证功能 本来是想做成能依赖正则表达式时时修正的（很尴尬 没整出来）结果就只能做成blur后再验证 然后验证没过就清空 听着狠简单 其实奥妙的狠 上代码
.vue

<input type="text" v-model="mobile" v-validate="'手机号'" />

directive.js

import Vue from 'vue'

const validate = {
    '手机号': function (s) {
        return /^1[0-9]{10}$/.test(s)
    }
}
Vue.directive('validate', {
    bind: function (el, binding, vnode) {
        const key = binding.value
        const isMobile = validate[key]
        el.addEventListener('blur', function () {
            if (!isMobile(this.value)) {
                this.value = ''
                el.dispatchEvent(new Event('input')) // 这个是点睛之笔
                alert(`${key}格式不正确`)
            }
        })
    }
})

如果没写这句el.dispatchEvent(new Event('input')) 单单写了this.value = '' 虽说页面效果是有了 但其实data里定义的mobile是没变的
那为什么写了这句el.dispatchEvent(new Event('input'))就可以改变data里定义的mobile呢？
原因是因为v-model就是一个语法糖

<input type="text" v-model="mobile" v-validate="'手机号'" /> 
<input type="text" :value="mobile" @input="mobile = $event.target.value" />

上面两句是等价的
所以想真正的改变data里定义的mobile 就需要手动触发input事件 才可以执行这句mobile = $event.target.value 才能真正的达到效果
基本就这样