<template>
    <div>
        <basic-info v-if="pBasicInfoVO.isShow"></basic-info>
        <sku-info v-if="pSkuInfoListVO.isShow"></sku-info>
        <delivery-info v-if="pDeliveryInfoVO.isShow"></delivery-info>
        <ware-house v-if="pWarehouseInfoVO.isShow"></ware-house>
        <description-info v-if="pDescriptionsInfoVO.isShow"></description-info>
        <account-info v-if="pManAccountVO.isShow"></account-info>
        <ordiary-info v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
        <business-relate v-if="pBusinessRelateInfoVO.isShow"></business-relate>
        <div class="footer">
            <a href="javascript：;" class="btn btn-success" @click="saveWarePublishVO">Save</a>
            <a href="javascript：;" class="btn btn-cancel">Cancel</a>
        </div>
    </div>
</template>

if you have the navigation page above, when you click save, reverse isValidate:

saveWarePublishVO() {
        this.setIsValidate(!this.isValidate)
        let isBasicInfoVOValid = this.basicInfoVO.validateFlag
        let isSkuInfoVOValid = this.skuInfoListVO.validateFlag
    
        this.$store.dispatch(type.SAVE_WARE_INFO)
    }
 

then each component listens to the isValidate field and sets the valid flag bit for each module:

watch: {
    isValidate() {
        this.$validator.validateAll().then((flag) => {
            if (!isRepeate && flag) {
                this.setBasicInfoValidateFlag(flag)
            }
        })
    }
}

but because the validateAll in the vee-validate method is executed asynchronously, and Synchronize executes when clicking save, the first click on save will not trigger watch,. How to solve this problem?