Vue切换卡 公用同一个组件

<el-col :span="8">
   <template>
     <div class="tab-box">
       <ul>
         <li
           v-for="(item, index) in navList"
           :key="index + item"
           @click="tabClickTab(index)"
           :class="{ active: menuIndex == index }"
         >
           {{ item.tab }}
         </li>
       </ul>
     </div>
     <div class="tabContent">
       <div
         v-for="(v, index) in navList"
         :key="index"
         v-show="menuIndex == index"
       >
         <Planecharts :rightToData='v.rightToData'/>    3.引入公共的组件  传值 
       </div>
     </div>
   </template>
 </el-col>

import Planecharts from "components/Planecharts.vue"  1.需要引入的组件  公共的
export default {
  name: "pageIndex",
  components: { Planecharts },   2.需要注册使用
  data() {
    return {
      menuIndex: "0",
      navList: [
        {
          tab: "导航一",
          tid:"001",
          rightToData: [
            {
              name: "测试数据一",
              value: "98",
            },
            {
              name: "测试数据二",
              value: "80",
            }
          ]
        },
        {
          tab: "导航二",
          tid:"002",
          rightToData: [
            {
              name: "AAA",
              value: "12",
            },
            {
              name: "BBB",
              value: "25",
            },
            {
              name: "CCC",
              value: "125",
            }
          ]
        }
      ]
  },
  methods: {
    tabClickTab(index){
      this.menuIndex = index      // 切换卡  当前的索引
    },
  }

 这个是要引入的组件

<template>
  <div
    class="echart"
    ref="planEchartId"
    :style="{ float: 'left', width: '500px', height: '500px' }"
  ></div>
</template>
<script>
export default {
  props: {
    rightToData: Array,
  },
  data() {
    return {};
  },
  watch: {
    rightToData: {
      handler() {
        this.getEchartData();
      },
      deep: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.getEchartData();
    });
  },
  methods: {
    getEchartData() {
      console.log(this.$refs);
      var myChart = this.$echarts.init(this.$refs.planEchartId);
      myChart.clear(); // 清空上次加载的option数据
      console.log("xxxxxxxxxxxx", this.rightToData);
      const xName = [];
      const yName = [];
      this.rightToData.forEach(function (item) {
        xName.push(item.name);
        yName.push(item.value);
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xName,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: yName,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>