[Solved]-How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API-Chart.js

You could use props to pass data to a child component.

https://vuejs.org/v2/guide/components-props.html

Example

App.vue

<template>
  <div id="app">
    <Chart :id="chartId" />
  </div>
</template>

<script>
import Chart from "@/components/Chart.vue";
// @/ means src/

export default {
  name: "App",
  components: {
    Chart,
  },
  data: () => ({
    chartId: 2,
  }),
};
</script>

Chart.vue

<template>
  <div>
    {{ id }}
  </div>
</template>

<script>
export default {
  name: "Chart",
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  mounted() {
    const apiURL = `/farfrom/chart/${this.id}`;
    // API call
  }
};
</script>