update reactive data in Timelinechart

[NattakornS]

this is my code

    var seriesData = ref([{
      data: 
      [
                {
                  x: 'Analysis',
                  y: [
                    new Date('2019-02-27').getTime(),
                    new Date('2019-03-04').getTime()
                  ],
                  fillColor: '#008FFB'
                },
                {
                  x: 'Design',
                  y: [
                    new Date('2019-03-04').getTime(),
                    new Date('2019-03-08').getTime()
                  ],
                  fillColor: '#00E396'
                },
                {
                  x: 'Coding',
                  y: [
                    new Date('2019-03-07').getTime(),
                    new Date('2019-03-10').getTime()
                  ],
                  fillColor: '#775DD0'
                },
                {
                  x: 'Testing',
                  y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-12').getTime()
                  ],
                  fillColor: '#FEB019'
                },
                {
                  x: 'Deployment',
                  y: [
                    new Date('2019-03-12').getTime(),
                    new Date('2019-03-17').getTime()
                  ],
                  fillColor: '#FF4560'
                }
              ]
      }]);

long time render chart about 10 seconds and show this error

runtime-core.esm-bundler.js?9e79:386 Uncaught (in promise) 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.
    at checkRecursiveUpdates (runtime-core.esm-bundler.js?9e79:386)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:304)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?9e79:312)

[code-manito]

Yes, I have the same problem How to solve

runtime-core.esm-bundler.js:6871 [Vue warn]: 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.

export const rangeBarOptions = { title: { text: '', align: 'left', offsetY: 10, style: { fontSize: '16px', fontWeight: 'blod', color: '#263238' }, }, grid: { yaxis: { lines: { show: false } } }, chart: { type: 'rangeBar', toolbar: { show: false }, }, plotOptions: { bar: { horizontal: false } }, dataLabels: { enabled: true }, xaxis: { axisBorder: { show: false }, axisTicks: { show: false }, }, tooltip: { enabled: true } }

[averri]

I have the same issue. One workaround is to invoke the method updateOptions or updateSeries, instead of relying on reactivity.

[Crotear1]

This Stackoverflow post helped me: https://stackoverflow.com/questions/77458993/vue-warn-maximum-recursive-updates-exceeded

Just use toRaw() <VueApexCharts type="rangeBar" height="450" :options="chartOptions" :series="toRaw(series)"></VueApexCharts>