maximum calstack size exceeded on vuex commit

Question

I have this error here

I could limit the error to this line here

  mounted() {
    this.$nextTick(() => {
      let ctx = this.$refs.canvas.getContext('2d')
      let { chartType, dataOptions } = this.module
      this.chart = new Chart(ctx, {
        type: chartType,
        data: dataOptions,
        options: minimizeOptions,
      })
    })
  },

The error comes from dataOptions. If i set data to {} everything works ok, but obviously my chart has no data then.

this.module is an prop that is being passed to my component. The component itself gets rendered in an v-for loop

    <module
      v-for="mod in modules"
      :module="mod"
      :key="mod._id.toString()"
    />

I am using here Chart.js.

I cannot find the reason for this call stack exceed error.

Maybe somebody had similar problems?

I also need to mention that this error happens when i want to toggle an global component that is placed in an layout layout

dataOptions:

{
   datasets: [
      {
          backgroundColor: "#34495e",
          borderColor: "bdc3c7",
          data: [0],
          label: "My first dataset"
      }
   ],
   labels: ["Start"]
}

Answer 1

I actually does not need reactivity on this prop, so i decided to freeze it up.

  let { chartType, dataOptions } = Object.freeze(this.module);

Reactivity is gone an the error aswell. This fixed my problem.

Maybe somebody has an solution for reactive data