Как мне вывести график для каждой таблицы?

У меня есть родительский компонент который выводит все данные v-recommended. В этом компоненте есть ребенок vTable который выводит таблицы с данными( полученными через API ). Для каждой таблицы должен быть график со своими данными. Так же в родительском компоненте v-recommended я уже вывел общий график. Вопрос в том, что я не понимаю как мне привязать остальные графики к таблице vTable. Компонент с графиком всего один. Мне его нужно как-то отобразить вместе с таблицами.

v-recommended.vue (Родитель)

<template>
  <div class="v-recommended pt-6 container mx-auto">
    <v-header-forms />

    <div class="wrapper flex items-center w-full">
      <div class="chart ml-10 flex-auto min-w-1/3 ">
        <!--    CHARTDATA {{ chartData}} -->
        <vChart  class="chart-v" :dataset="chartData" />
      </div>

      <v-call-spread-right class="call min-w-1/4 ml-5  " />
    </div>

<div class="tabe-wrapper flex justify-end">
    <div class="table " v-if="fullDataList">
      <vTable
        
        v-for="information in fullDataList"
        :key="information"
        :tableData="information['table']"
  
      />
    </div>
    </div>
  </div>
</template>

<script>
import vChart from "./v-vue-chart";
import { mapGetters } from "vuex";
import vHeaderForms from "./header/v-header-forms";
import vCallSpreadRight from "./menu-right/v-call-spread-right";
import vChartsStatisctics from "./v-charts-statistics";
import vTable from "./tables/v-table-statistics";

export default {
  name: "v-recommended",
  components: {
    vChart,
    vHeaderForms,
    vCallSpreadRight,
    vChartsStatisctics,
    vTable,
  },

  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["fullDataList", "chartData"]),
  },
};
</script>

<style></style>

v-table-statistic.vue (Таблица, куда нужно привязать график из vChart)

<template>
  <div class="v-table-statistics">
<!--     {{ fullDataList }} -->

    <table class="table-auto text-center mt-5 justify-end">
      <thead class="border border-gray-400 bg-gray-100">
        <tr>
          <th></th>
          <th>{{ underlyingChoice }}</th>
          <th>%</th>
          <th>USD</th>
        </tr>
      </thead>
      <tbody class="border border-gray-400">
        <tr class="border-gray-400">
          <td>Amount of underlying</td>
          <td>{{ tableData [underlyingChoice] ['Amount of underlying'] }}</td>
          <td>{{ tableData ['%'] ['Amount of underlying'] }}</td>
          <td>{{ tableData ['USD'] ['Amount of underlying'] }}</td>
          
        </tr>
        <tr class="border-gray-400 bg-emerald-200">
          <td>Max profit</td>
          <td>{{ tableData [underlyingChoice] ["Max profit"].toFixed(2) }}</td>
          <td>{{ tableData ['%'] ["Max profit"].toFixed(2)}}</td>
          <td>{{ tableData ['USD'] ["Max profit"].toFixed(2) }}</td>
        </tr>
        <tr class="border-gray-400">
          <td>Structure product price</td>
          <td>{{ tableData [underlyingChoice] ["Structure product price"].toFixed(2) }}</td>
          <td>{{ tableData ['%'] ["Structure product price"].toFixed(2) }}</td>
          <td>{{ tableData ['USD'] ["Structure product price"].toFixed(2) }}</td>
        </tr>
        <tr class="border-gray-400">
          <td>Maintenance margin</td>
          <td>{{ tableData [underlyingChoice] ["Maintenace margin"].toFixed(2)}}</td>
          <td>{{ tableData ['%'] ["Maintenace margin"].toFixed(2) }}</td>
          <td>{{ tableData ['USD'] ["Maintenace margin"].toFixed(2) }}</td>
        </tr>
        <tr class="border-gray-400">
          <td>Total margin</td>
          <td>{{ tableData[underlyingChoice] ["Total margin"].toFixed(2) }}</td>
          <td>{{ tableData ['%'] ["Total margin"].toFixed(2) }}</td>
          <td>{{ tableData ['USD'] ["Total margin"].toFixed(2) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import vChart from "../v-vue-chart"

export default {
  components:{
    vChart,
  },
  name: "v-table-statistics",
  props: {
    tableData: {
      type: Object, 
      default() {
        return {}
      }
    }
  },

  computed: {
    ...mapGetters(["underlyingChoice","fullDataList", "chartData"])
  },

  data() {
    return {};
  },
};
</script>

v-vue-chart.vue (Сам график)

<script>
import { Scatter } from "vue3-chart-v2";

export default {
  extends: Scatter,
  props: {
    dataset: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    dataset(newValue, oldValue) {
      if (newValue && newValue.length) {
        console.log(this.dataset);
        let chartData = {
          labels: [],
          datasets: [
            {
              label: "Data 1",
              backgroundColor: 'red',
              /* showLine:true, */
              data: this.dataset,
            },
          ],
        };
        this.dataset.forEach((item) => {
          chartData.labels.push(item.x);
          chartData.datasets[0].data.push(item.y);
        });
        this.renderChart(chartData, {
          responsive: true,
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "My Data",
          },
        });
      }
    },
  },

  mounted() {},
};
</script>