[Solved]-How to have multiple highcharts with different series data in vuejs without repeating code-Highcharts

You're passing down chartOptions into the highcharts component. If you've defined this data on the parent component, Vue will have made it reactive, so when you change the data the chart will update automatically.

Below is a basic example of how this would work:

<template>
  <div>
    <highcharts :options="chartOptions[0]"></highcharts>
    <highcharts :options="chartOptions[1]"></highcharts>
    <button @click="changeData">Change data for first chart</button>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions: [
        {
          series: [
            {
              data: [1, 2, 3]
            }
          ]
        },
        {
          series: [
            {
              data: [4, 5, 6]
            }
          ]
        },
      ]
    }
  },
  methods: {
    changeData() {
      this.chartOptions[0].series[0].data = [4, 8, 1];
    }
  }
};
</script>

EDIT:

To create multiple charts with the same options, you could create a custom chart component, and pass in just the data series as a prop:

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  name: 'CustomPie',
  components: {
    highcharts: Chart
  },
  props: ['data'],
  data() {
    return {
      chartOptions: {
        chart: {
          type: "pie"
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
          }
        },
        series: [
          { 
            name: 'Comparison',
            data: this.data,
          },
        ]
      },
    }
  },
  watch: {
    data(newVal) {
      this.chartOptions.series[0].data = newVal;
    }
  }
};
</script>

Note that you have to set up a watcher on the data prop, in order to update the components chartOptions when the data changes.

And your parent component (where you're displaying the charts) would look something like this:

<template>
  <div>
    <CustomPie :data="chartData1" />
    <CustomPie :data="chartData2" />
    <button @click="changeData">Change data for first chart</button>
  </div>
</template>

<script>
import CustomPie from "./CustomPie";

export default {
  components: {
    CustomPie
  },
  data() {
    return {
      chartData1: [1,2,3],
      chartData2: [4,5,6]
    }
  },
  methods: {
    changeData() {
      this.chartData1 = [4, 8, 1];
    }
  }
};
</script>