"RangeError: Maximum call stack size exceeded" -- new error even though code hasn't changed.

[andberry89]

So I had my line graph working and looking the way I wanted. When I started to add multiple instances of the component to the same page, I started running into errors. Now I'm running into this Call Stack error even when I'm only activating one graph.

I've read through several discussions about this, but my data is not reactive. I also cannot find any infinite loops/calls that would cause this error.

Also, I tried running my component with the simplest of data to try and begin to find where my issue lies, but the call stack error pops up then too.

Here's my code with the basic data information.

"LineChart.vue" -- which is registered globally

<template>
  <LineChart
    :options="options"
    :data="data"
  />
</template>
<script>
import { Line } from 'vue-chartjs'
import { Chart as ChartJS, registerables } from 'chart.js'

ChartJS.register(...registerables)

export default {
  name: 'LineChart',
  components: {
    LineChart: Line,
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

"ChartsContainer.vue" -- even with the simplest of data, it's giving me the error.

<template>
  <div class="charts-container">
    <LineChart :data="dataCollection" />
  </div>
</template>

<script>
export default {
  name: 'ChartsContainer',
  data() {
    return {
      dataCollection: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80, 40],
          },
        ],
      },
    }
  },
}
</script>