父组件传值给子组件，Echarts图表不刷新/渲染的问题

背景：最近刚上手一个项目用到了大量的图表，刚开始用的是子数据，所以没有出现情况，联通后端接口之后，在父组件请求数据并传值给子组件，遇到了数据接受了，但是图表没有重新渲染的问题。

   父组件

//父组件中引用图表
      <template slot="content-layout-1">
        <Pie :pie_percent="pie_percent"></Pie>
      </template>



<script>
import Pie from "./components/pie.vue";
export default {
  components: {
    Pie,
  },
  data() {
    return {
      pie_percent: [],
    };
  },
  created() {
    this.showPie();
  },
  methods: {
    showPie() {
     //请求数据的方法
    },
  },
};
</script>

子组件

<template>
  <div class="test1" id="test1" style="width: 400px; height: 300px"></div>
</template>

<script>
export default {
  props: ["pie_percent"],
  data() {
    return {
      percent: [
        {
          value: 0,
          name: "合格数量",
        },
        {
          value: 0,
          name: "不合格数量",
        },
      ],
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("test1"));
  },
  watch: {
//使用watch来监听数据的变化当数据更新时复制给相应的变量
    pie_percent: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.percent[0].value = newVal[0].success_percent;
          this.percent[0].value = newVal[0].error_percent;
          this.renderEcharts(this.percent);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    renderEcharts(percent) {
        data:percent
    },
  },
};
</script>

<style>
</style>