vue中，封装的select组件选择校验问题

Question

我封装了一个select框：

<template>
    <select v-model="currentValue" @change="changeValue">
        <option value="">---please select---</option>
        <option v-for="(item, index) in optionList" :value="item.value" :key="'select_option_' + id + '_' + index">{{item.name}}</option>
    </select>
</template>

<script type="text/ecmascript-6">
export default {
    props : {
        id: {
            type: String,
            default : "defaultId"
        },
        value : {
            type: [String, Object, Boolean, Number],
            default : ""
        },
        optionList : {
            type : Array,
            default () {
                return [];
            }
        }
    },
    data () {
        return {
            currentValue : ""
        };
    },
    mounted () {
        this.currentValue = this.value;
    },
    watch: {
        value (newVal) {
            console.log(newVal);
            console.log(typeof newVal);
            this.currentValue = newVal;
        }
    },
    methods : {
        changeValue () {
            this.$emit("input", this.currentValue);
            this.$emit("change", this.currentValue);
        }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>

然后在另外一个组件A中使用：

<pop-select id="sel_companyAuthenEdit_skdpProvinceId" 
    @change="changeProvince" 
    name="skdpProvinceId" 
    class="input-short" 
    :option-list="skdpProvinceList" 
    v-model="authenticationInfo.skdpProvinceId" v-validate="'required'">
</pop-select>
<span class="error-msg" v-show="errors.has('skdpProvinceId')">{{ errors.first("skdpProvinceId")}}</span>

该组件的JS如下：

export default {
    mixins: [authStepMixin],
    methods: {
    // 改变省事件处理
    changeProvince (val) {
        let self = this;
        console.log("change");
        if (val) {
            self.selectAreaByPid(1);
        } else {
            self.authenticationInfo.skdpCityList = [];
            self.authenticationInfo.skdpAreaList = [];
            self.authenticationInfo.skdpProvinceId = "";
            self.authenticationInfo.skdpAreaId = "";
            self.authenticationInfo.skdpCityId = "";
        }
    }
}

然后mixin.js定义如下：

    import { mapActions } from "vuex";
    import * as types from "../../../stores/types";
    import * as urls from "../urls";
    import global from "../global";
    
    export const authStepMixin = {
    data () {
        return {
            stepAuthInfoVo: {},
            authenticationInfo: {},
            shopInfo: {}
        };
    },
    created () {
        this.fetchData();
    },
    methods: {
        // 获取认证步骤数据
        fetchData () {
            let self = this;
            self.showModal = false;
            let option = {
                url: urls.QUER_AUTH_PAGE_INFO,
                success (data) {
                    console.log(data);
                    self.stepAuthInfoVo = data;
                    self.authenticationInfo = (data && data.authenticationVo) || {};
                    self.shopInfo = (data && data.shopVo) || {};
                },
                error () {
                }
            };
            self.ajax(option);
        }
    }
};

然后，我在组件A中选择please select后，鼠标点击页面其他地方才触发校验，我想要的效果选择后立即校验，请问如何修改。
ps:校验插件使用vee-validate,并且使用默认的校验时机。如果我在组件A中的data中单独定义字段绑定到select组件，选择please select后能够立即校验，

Answer 1

正常不应该是在 watch 的时候触发 input，change 的时候触发 change 吗（其他事件都应该触发同名事件），因为没能复现，不知道是不是跟这个有关，因为我就没触发 change 事件，也可正常校验。