[Bug]: Reactive data doesn't work (Maximum call stack size exceeded)

[mrleblanc101]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Currently, if my data is a ref, Vue throws an error when I try to push new data into the dataset.

<template>
  <Line :data="data" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  TimeScale,
} from 'chart.js';
import { Line } from 'vue-chartjs';

ChartJS.register(
  CategoryScale,
  LinearScale,
  TimeScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const dataA = [{
  x: 0,
  y: 0,
}, ...];
const dataB = [{
    x: 0,
    y: 0,
}, ...];
const dataC = [{
    x: 0,
    y: 0,
}, ...];

const data = ref({
  datasets: [
    {
      backgroundColor: 'red',
      borderColor: 'red',
      showLine: true,
      fill: false,
      pointRadius: 2,
      label: 'A',
      data: [],
      lineTension: 0,
      interpolate: true,
    },
    {
      backgroundColor: 'green',
      borderColor: 'green',
      showLine: true,
      fill: false,
      pointRadius: 2,
      label: 'B',
      data: [],
      lineTension: 0,
      interpolate: true,
    },
    {
      backgroundColor: 'blue',
      borderColor: 'blue',
      showLine: true,
      fill: false,
      pointRadius: 2,
      label: 'C',
      data: [],
      lineTension: 0,
      interpolate: true,
    },
  ],
  labels: [],
});
const options = {
  scales: {
    x: {
      type: 'linear',
    },
    y: {
      type: 'linear',
    },
  },
};

let index = 0;
setInterval(() => {
  data.value.datasets[0].data.push(dataA[index]);
  data.value.datasets[1].data.push(dataB[index]);
  data.value.datasets[2].data.push(dataC[index]);
  index++;
}, 1000);
</script>

Reproduction

https://stackblitz.com/edit/github-wctthjhg?file=src%2FApp.vue

chart.js version

4.4.7

vue-chartjs version

5.3.2

Possible solution

Replace the whole object.

[mrleblanc101]

I also tried:

1. Using a single dataset
2. Replacing the const data = ref({ ... }) with const data = shallowRef({ ... }) and calling triggerRef(data) inside the setInterval instead.

[mrleblanc101]

Might be related to Vue 3.4 and Vue 3.5 new reactivity system ?
Vue 3.4: https://blog.vuejs.org/posts/vue-3-4#more-efficient-reactivity-system
Vue 3.5: https://blog.vuejs.org/posts/vue-3-5#reactivity-system-optimizations

[bschelling]

that's pretty annoying, any updates?