title: Performance issues when using VueJS with HighCharts
body: <p>I'm using a HightCharts in a VueJS project and I'm having the given implementation from below. Due the complexity of the project requirements, I'm not able to use the <code>highcharts-vue</code> so I'm using the plain JS nested in my Vue component.</p>
  
  <p>In the same time, there is a <code>setIntevral</code> method running on each second (for displaying a clock) and many minor <code>setTimeout</code> methods running from time to time.</p>
  
  <p>Since JavaScript is executing in a one-thread (by it's nature), my page is getting slow every time when the chart is loading (the clock is not updating, meaning that <code>setInterval</code> is not even executing).</p>
  
  <p>From HighCharts point of view, I can not use the option for "asynchronous" loading, again due the requirements of my project (this option is strictly related to HighCharts library not to JavaScript in general).</p>
  
  <p>So basically this post can have like <strong>two questions</strong>:</p>
  
  <p><strong>1)</strong> Can this way of adding the plain JavaScript, nested in the components, be a reason for these performance issues?</p>
  
  <p><strong>2)</strong> Is there any way to make the JavaScript code from the different components to not be blocked one by another?</p>
  
  <p>The code for component that loads the chart is given below and I'm wondering if this is violating the VueJS principles and if can be the cause for the performance issues which I'm facing.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="chart-container"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Highcharts from 'highcharts';
  
    export default {
      function createChart(some_data) {
          //create chartSettings based on the passed variable "some_data"
          let chartSettings = {
              chart: {
                  renderTo: this.$el.querySelector('#chart-container'),
                  events: {
                      //some chrat related settings
                  }
              }
          }
          //here we are also updating data for "some_variable" and "another_variable"
          this.chart = new Highcharts.stockChart(chartSettings);
      }
  
      function updateCharts() {
          //some calculations where we create new settings for chart
          //here we are also updating data for "some_variable" and "another_variable"
          createChart.call(this, newChartsData);
      }
  
      data() {
           chart: null,
           some_variable: "one",
           another_variable: "two",
      }
    }
  &lt;/script&gt;
  </code></pre>