The simplest custom watcher causes console errors [Vue warn] regarding infinite loop

Expected Behavior

Calling this.renderChart(this.data, this.options) or this.$data._chart.update() should not bring about risk of and console error(s) regarding infinite loops:

[Vue warn]: You may have an infinite update loop in watcher with expression “data”

Actual Behavior

1. Create a custom component importing, say, { Line } from 'vue-chartjs';;
2. Create a button clicking upon which changes, say, labels for the chart data object.
3. Realize that mixins.reactiveProp does not penetrate data object deeply enough to reach the labels property, which is usually the use-case, and that using it would require to change a prop name from :data to :chart-data of your already widely used component.
4. Create a simple custom watcher instead, whether it be with this.renderChart(this.data, this.options) or this.$data._chart.update() callbacks to watch over data / chartData property, as per the docs.

On my end, doing so produces errors in the console, with that the this.renderChart(this.data, this.options) creates only one, while this.$data._chart.update() seems to actually be producing an infinite loop, as the errors are being thrown and stacking circa every second.

Environment

• vue.js version: ^2.5.21
• vue-chart.js version: 3.4.0
• npm version: 5.6.0

NOTE: I think that the project is awesome, loving it. Keep up the good work! 😃 🍻

[rafilurie]

Is there an answer to this question? I am having the same problem

[JStrebeyko]

Thanks big time for detailed explanation of nature of the problem, @jonasohrn. Any chance of having the the example modified so it works with no warnings? I want to become a responsible vue-chartjs user, but need some guidence in reactive data implementation! I am sure that codesandbox’ed solution to the issue in question would become helpful to many others like myself. Sending love 💋