I’m getting this error in my vue app for using the timeline chart from apexchart:
ERROR
Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

this is the timeline chart initialization timeline-data.js:

import getChartColorsArray from "@/common/getChartColorsArray";

const basicTimelineChart = {
  series: [
    {
      data: [
        {
          x: "Code",
          y: [
            new Date("2019-03-02").getTime(),
            new Date("2019-03-04").getTime(),
          ],
        },
        {
          x: "Test",
          y: [
            new Date("2019-03-04").getTime(),
            new Date("2019-03-08").getTime(),
          ],
        },
        {
          x: "Validation",
          y: [
            new Date("2019-03-08").getTime(),
            new Date("2019-03-12").getTime(),
          ],
        },
        {
          x: "Deployment",
          y: [
            new Date("2019-03-12").getTime(),
            new Date("2019-03-18").getTime(),
          ],
        },
      ],
    },
  ],
  chartOptions: {
    chart: {
      height: 350,
      type: "rangeBar",
      zoom: {
        enabled: false,
      },
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: true,
      },
    },
    colors: getChartColorsArray('["--vz-primary"]'),
    title: {
      text: "Project Timeline",
      align: "left",
      style: {
        fontWeight: 500,
      },
    },
    xaxis: {
      type: "datetime",
    },
    yaxis: {
      title: {
        text: "Tasks",
      },
    },
    tooltip: {
      x: {
        format: "dd MMM yyyy",
      },
    },
  },
};

export { basicTimelineChart };

project-timeline.vue:

<script>
import { basicTimelineChart } from "./timeline-data.js";

export default {
  data() {
    return {
      series: basicTimelineChart.series,
      chartOptions: basicTimelineChart.chartOptions,
    };
  },
};
</script>

<template>
  <BCard no-body class="card-height-100">
    <BCardBody class="px-0">
      <apexchart
        class="apex-charts"
        height="350"
        dir="ltr"
        :series="series"
        :options="chartOptions"
      ></apexchart>
    </BCardBody>
  </BCard>
</template>

and i call the project-timeline.vue in my index.vue

i tried using toRaw function from vue to remove reactivity on the basicTimelineChart.series and basicTimelineChart.chartOptions but still getting the error, If i commented the <projectTimeline /> in index.vue where i call and display the chart there is no error so i pretty sure the error is from here