in the vue project, you have the following code:

<template>
    <div>
        <basic-info v-if="pBasicInfoVO.isShow"></basic-info>
        <ordiary-info v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
        <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>

<script type="text/ecmascript-6">
    import * as type from "store/modules/warePublish/type"
    
    export default {
        data() {
            return {
                breadcrumbs: [
                    {title: "Location"},
                    {title: "Product Management"},
                    {title: "Product Creation"}
                ],
                activeStep : 1,
                isOpen: false,
            }
        },
      
        methods: {
            saveWarePublishVO() {
                this.setIsValidate(!this.isValidate)
                let isBasicInfoVoValid = this.basicInfoVO.validateFlag
                let isOrdinaryAttrInfoVOValid = this.ordinryAttrbuteInfoVO.validateFlag
                this.$store.dispatch(type.SAVE_WARE_INFO)
            },
            ...mapMutations({
                setIsValidate: "SET_VALIDATE",
                setAlertConfig: "SET_ALERT_CONFIG"
            })
        },
     computed: {
         ...mapGetters([
            "isValidate"
            "basicInfoVO",
            "ordinryAttrbuteInfoVO"
        ])
     }
        
    }
 }
</script>

when you click save, reverse the isValidate in vuex (default is false), and then listen for watch isValidate, in each component, but you cannot listen for changes in isValiate in ordiary-info components, but if you click checkbox, and then click the save button, you can listen for changes in isValidate. What is the reason for this?

<template>
    <div>
        <div class="form-group">
            <label class="control-label" :class="{necessary: attribute.required}">{{ attribute.propertyName }}:</label>
            <div class="content">
                <div class="form-item ell" v-for="item in lessAttriList">
                    <input :type="inputType"
                           :id="getId()"
                           :name="getId(false)"
                           :class="inputType"
                           :value="item.propertyValueId"
                           v-model="checkedIdList"
                           v-validate="{
                                    required: attribute.required
                               }"/>
                    <label :for="getId(false)" :title="item.valueData">{{ item.valueData }}</label>
                </div>
                <div v-if="moreAttriList.length > 0 && isMore">
                    <div class="form-item ell" v-for="item in moreAttriList">
                        <input :type="inputType"
                               :id="getId()"
                               :name="getId(false)"
                               :class="inputType"
                               :value="item.propertyValueId"
                               v-model="checkedIdList"
                               v-validate="{
                                    required: attribute.required
                               }"/>
                        <label :for="getId(false)" :title="item.valueData">{{ item.valueData }}</label>
                    </div>
                </div>
            </div>
            <a v-if="moreAttriList.length > 0" href="javascript：;" class="more-btn" :class="[{up: isMore}]" @click="showMore">{{ isMore ? "Less" : "More"}}</a>
        </div>
        <p class="text-danger m-l-211" v-show="showErrMsg">required.

    </div>
</template>


computed: {
        ...mapGetters([
            "isValidate",
            "ordinryAttrbuteInfoVO"
        ])
    }
     watch: {
        isValidate(old, newVal) {
            console.log(old, newVal)
            })
        }
    }