as shown below, the subcomponent code:

<template>
<div class="container">
    <div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from "highcharts"
export default {
    props: {
        id: {
            type: String
        },
            //option 
        option: {
            type: Object
        }
    },
    mounted() {
        this.drawPage(this.id, this.option)
    },
    methods:{
        drawPage(id,option){
            HighCharts.chart(id,option);
        }
    },
    watch:{
        "id":function(newData,oldData){
            this.id=newData;
            console.log(newData,oldData);
        },
        "option":{
            handler(newValue,oldValue){
                console.log(newValue);
                console.log(oldValue);
                this.option=newValue;
                this.drawPage(this.id, this.option)
            },
            deep:false
        }
    }
}
</script>
<style scoped>
</style>

then I get the background data in the parent component, and then update the value of option, but find that it cannot be rendered. Writing deep:true here will cause a special card on the page and constantly monitor this part of the change.
what should be done here?