Vue-chartjs: Reactive Props - Max Call Stack Exceeded Error

[NickAmbrosio]

Expected Behavior

As per the example with reactive props in http://vue-chartjs.org/#/home?id=reactive-data.

Actual Behavior

I hesitate to post this issue since I have used this library in the past without issue.
However, now that I am using the webpack boilerplate template there is a Maximum Call Stack Exceeded error thrown when the totalChartData property changes. I have isolated the issue to LineChart Component in the component.js. Any actions dispatched / mutations to the store while the LineChart component is commented out has not given any maximum exceeded error.

LineChart.js

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default Line.extend({
  name: "LineChart",
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    this.renderChart(this.chartData, this.options)
  }
})

component.js

<template>
  <div>
    <LineChart id="totals"
                       :chart-data="totalChartData"
                       :options="monthlyChartOptions"
                       :height="125"></LineChart>
  </div>
</template>
<script>
  import LineChart from "../../Standard/LineChart.js"
  import { mapState, mapGetters } from "vuex"

  export default {
      name: 'MonthlyPerformance',
      components: {
          LineChart,
      },
      data (){
        return {
          monthChoices: [],
          monthlyChartOptions (){
            return { legend: { position: "bottom"},
              scales: {
                yAxes: [{
                  maxTicksLimit: 2
                }]
              }
            }
          },
        }
      },
      computed: {
        ...mapGetters("DataPages/MonthlyPerformance", {
            totalVisitsCount: 'GET_CURRENT_TOTAL_VISITS',
            totalChartData: "GET_TOTAL_CHART_DATA",
        }),
    },
      methods: {
        toggleDropdown (){
          this.dropdownActive = !this.dropdownActive
        },
        refreshData (){
          this.$store.dispatch("DataPages/MonthlyPerformance/FETCH_NEW_CHART_DATA", null, {root: true})
        },
        selectMonth (month){
          this.$store.commit("DataPages/MonthlyPerformance/UPDATE_DATE_RANGES", month)
          this.refreshData()
          this.dropdownActive = false;
        },
      },
      created(){
        this.refreshData()
      }
  }
</script>

store

const state = () => {
  return {
    totalVisits:{
      totals: {
        current: null,
        previous: null
      },
      chartData: {}
     }
  }
}

Please let me know if any more information is needed.

Environment

• vue.js version: 2.3.3
• vue-chart.js version: 2.8.1
• npm version: 5.3.0

[NickAmbrosio]

Solution

The props that I was mapping from my state needed to be deep cloned otherwise particular watchers were traversing the entire tree when totalChartData was updated.

Component

...mapGetters("DataPages/MonthlyPerformance", {
            totalVisitsCount: 'GET_CURRENT_TOTAL_VISITS',
            totalChartData: "GET_TOTAL_CHART_DATA",
        }),

Getters.js

GET_TOTAL_CHART_DATA (state){
    return cloneDeep(state.totalVisits.chartData)
  },
 GET_CURRENT_TOTAL_VISITS(state){
    return cloneDeep(state.totalVisits.totals.current)
  }

No more max call stack exceeded.

[apertureless]

Thanks for the solution!