I encapsulated a select box:

<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>

is then used in another component 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>

the JS of this component is as follows:

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 = "";
        }
    }
}

then mixin.js is defined as follows:

    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);
        }
    }
};

then, after I select please select in component A, the mouse clicks elsewhere on the page to trigger the check. I want to check immediately after selecting the effect. How to modify it? The
ps: verification plug-in uses vee-validate, and uses the default check timing. If I define a field separately in data in component An and bind it to the select component, I can verify it immediately after selecting please select ,