title: rerender multiple graphs in vue chart js
body: <p>I am using Vue js with chart js 2.9.4 package. I need to rerender two horizontal graphs same time on the same Vue component. API is used to fetch chart data. My attempt is as below.</p>
  <pre><code> &lt;HorizontalChart v-if=&quot;loaded&quot; :col-names=&quot;ColNames&quot; :data=&quot;getChartData&quot; /&gt;
   &lt;HorizontalChart v-if=&quot;loaded&quot; :col-names=&quot;ColNames&quot; :data=&quot;getChartData&quot; /&gt;
  </code></pre>
  <p>Above code in one single Vue component and <code>getChartData</code> is a computed method to return data. <code>loaded</code> is a flag default with false and when the API returns it will set to true. This is working and re-rendering without any issue if only one chart is available. But when two charts available as in above its works only for the first time. When data changes and second time re-rendering it gives a run time error saying <code>You may have an infinite update loop in watcher with expression &quot;chartData&quot;</code>.</p>
  <pre><code>watch: {
    chartData: {
      handler(newVal) {
        if (newVal) {
          this.$data._chart.destroy()
          ;(this as any).renderChart(this.chartData, this.options)
        }
      },
      deep: true,
    },
  }
  </code></pre>
  <p>Is there any way to fix the issue? Maybe timeout kinda thing to load a chart one after the other?</p>