我显示了四个图表，因此我创建了四个不同的图表组件，但所有组件都相同，只是API id不同。
为了使代码更有效，我想制作一个Chart.vue组件，然后在任何其他组件中按各自的ID显示图表。
下面是我的一个图表组件：

<template>
      <div class="chart-container" style="position: relative; height: 25vh; width:100%;">
        <canvas id="DisplayChart" ></canvas>
      </div>
    </template>
    <script>
    import moment from 'moment'
    export default {
      name: 'Chart',
      async mounted () {
        await this.$http.get('/farfrom/chart/3') //Here 3 is the ID of the chart.
          .then((response) => {
            const result = response.data
            const ctx = document.getElementById('DisplayChart').getContext('2d')
            const Chart_data = []
            for (let i = 0; i < result.date.length; i++) {
              Chart_data.push({
                x_axis: moment(result.date[i], 'X').toDate(),
                y_axis: result.challenge[i]
              })
            }
            let myChart
            if (myChart !== undefined) {
              myChart.destroy()
            }
            myChart = new Chart(ctx, {
              type: 'line',
              data: {
                datasets: [
                  {
                    label: 'Chart_from_API',
                    data: Chart_data,
                ]
              },
              options: {
                lineTension: 0,
                maintainAspectRatio: false,
                scales: {
                  yAxes: [
                    {
                      scaleLabel: {
                        display: false
                      },
                      ticks: {
                        beginAtZero: true,
                        // eslint-disable-next-line no-unused-vars
                        callback (value) {
                          return `${value  }k`    // y-axis value will append k to it
                        }
                      }
                    }
                  ],
                  xAxes: [
                    {
                      type: 'time',
                      time: {
                        unit: 'month'
                      },
                      scaleLabel: {
                        display: true
                      }
                    }
                  ]
                }
              }
            })
          })
          .catch((error) => {
            console.log(error)
          })
      }
    }
    </script>

我已经在另一个组件中导入了此内容，如：

<template>
      <div class="chart-container">
        <Chart></Chart>
      </div>
    </template>
    <script>
    import Chart from 'Chart.vue'
    ....
    </script>

这里我展示了我的一个图表的例子在4个图表中，我的其他图表也是相同的，只是在API的ID的变化。
现在，正如我所说，我想知道我如何可以使一个单一的图表。vue与一些变量的API ID，并使用它在任何组件各自的ID。请帮助我在这一点上。
目标：我想有一个单一的Chart.vue组件，而不是4个图表，如果我想使用任何图表，我应该能够使用各自的ID。