problem description

general meaning: the table is the parent component, and the modal box is the child component. Click the operation button of the parent component table, and you need to transfer the data currently clicked to the modal box for display. The props value is used, because the data of the child component initializes the value of props only once. When the parent component button is clicked, the value of props is not dynamically updated to the child component data, using watch solution, because a lot of watch, has been used in the program. Will too much wacth affect the performance of the program? is there a better solution

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

/ / parent component passes values

"a", {
    style: {
        marginRight: "8px"
    },
    on: {
    click: () => {
        this.modalShow = true;            //   true
        this.instanceInfo = params.row;  // 
        }
    }
},
""

/ / Sub-component receives

// modalShow truefalse  
// instanceInfo
props: ["modalShow", "instanceInfo"],
data() {
    return {
        xuFeiTableData: []   // instanceInfo
    };
},
watch: {
    //  propsxuFeiTableData
    modalShow: function (newValue, oldValue){
        this.xuFeiTableData = [];
        if(newValue == true){
            this.xuFeiTableData.push(this.instanceInfo);  
        }
    }
}

what result do you expect? What is the error message actually seen?

better solve the problem that the child component dynamically fetches the value of the parent component?