title: How to use Vue bound data in Highcharts?
body: <p>I have a chart which axis contents and data will change with time. This happens in a Vue framework.</p>
  
  <p>My idea was to use <code>setData()</code> and <code>setCategories()</code> to give the chart pointers to data which will be dynamic. This does not work: <strong>when data is updated, the chart is not.</strong></p>
  
  <p>The example is in <a href="https://codepen.io/WoJWoJ/pen/aqJvOo?editors=1011" rel="nofollow noreferrer">Codepen.io</a> and reproduced below for reference. Please note that this hangs my browser (but the codepen version is OK)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
      el: "#app",
      data: {
          config: {
              chart: {
                  type: 'heatmap'
              },
              series: [{}]
          },
          src: ['a', 'b'],
          dst: ['x', 'y'],
          data: [[0, 0, 1], [0, 1, 2], [1, 0, 3], [1, 1, 4]],
          chart: undefined
      },
      mounted() {
          this.chart = Highcharts.chart('container', this.config)
          console.log(this.chart)
          // the content of the axis and the data will be dynamic
          this.chart.series[0].setData(this.data, true)
          this.chart.xAxis[0].setCategories(this.src, true)
          this.chart.yAxis[0].setCategories(this.dst, true)
  
          // simulation of some data changing after some time
          setTimeout(() =&gt; {
              this.data = [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]]
              // console.log('updated')
          }, 3000)
      }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/heatmap.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
     &lt;div id="container"&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>