我封裝了一個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: {
        // 獲取認證步驟數(shù)據(jù)
        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后，鼠標點擊頁面其他地方才觸發(fā)校驗，我想要的效果選擇后立即校驗，請問如何修改。
ps:校驗插件使用vee-validate,并且使用默認的校驗時機。如果我在組件A中的data中單獨定義字段綁定到select組件，選擇please select后能夠立即校驗，