title: How to reflow HighCharts when using highcharts-vue?
body: <p>I've got a pretty simple component:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;chart
              v-if=&quot;!loading&quot;
              ref=&quot;priceGraph&quot;
              constructor-type=&quot;stockChart&quot;
              :options=&quot;chartData&quot;
              :deepCopyOnUpdate=&quot;false&quot;
          /&gt;
          &lt;div v-else&gt;Loading...&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { Vue, Component, Prop } from &quot;vue-property-decorator&quot;;
  import { EventBus } from &quot;../events&quot;;
  import { Chart } from &quot;highcharts-vue&quot;;
  import { PriceData } from &quot;src/models/DataFile&quot;;
  
  @Component({
      components: { Chart }
  })
  export default class PriceChart extends Vue {
      @Prop({ type: Boolean, required: true })
      readonly loading!: boolean;
  
      @Prop({ type: Array, required: true })
      readonly prices!: PriceData;
  
      mounted() {
          EventBus.$on(&quot;reflow&quot;, () =&gt; {
              // NOT RIGHT:
              this.$refs.priceGraph.chart.reflow();
          });
      }
  
      get chartData() {
          return {
              xAxis: {},
              yAxis: {},
              series: [
                  {
                      type: &quot;candlestick&quot;,
                      data: this.prices
                  }
              ]
          };
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Per the <a href="https://github.com/highcharts/highcharts-vue#chart-object-reference" rel="nofollow noreferrer">highcharts-vue documentation</a>, it should be possible to access the underlying Highcharts instance so that I can call the <a href="https://api.highcharts.com/highcharts/chart.reflow" rel="nofollow noreferrer"><code>reflow</code> method</a>. However I'm having trouble figuring out how...</p>
  <blockquote>
  <p>You can access the Chart object instance if necessary (e.g when need to get some data or use any of Chart.prototype functions), <strong>by calling specific Vue component instance chart field</strong>, but it is not supported to update the chart using its built-in functions, because that could cause a problems with data synchronization between your app and the chart itself (it disturbs conception of using wrappers). The most recommended way of implementing it, is to use it in the way presented in demo app.</p>
  </blockquote>
  <p>It's not 100% clear what is meant by &quot;calling specific Vue component instance chart field&quot;, but I <em>assume</em> this means I can say <code>this.$refs.priceGraph.chart</code> to get the instance (the &quot;chart&quot; field of the Vue component instance, and my understanding is that <code>this.$refs.priceGraph</code> should refer to the Vue component instance)</p>
  <p>But it's failing in two different ways. At compile-time I'm getting the following error from TypeScript:</p>
  <pre><code>ERROR in /home/stevenbarnett/Repos/stockgraph/src/components/PriceChart.vue(33,26):
  TS2339: Property 'chart' does not exist on type 'Element | Element[] | Vue | Vue[]'.
    Property 'chart' does not exist on type 'Element'.
  Version: typescript 3.9.5
  </code></pre>
  <p>If I ignore this error and run my code anyway, it's failing in the console saying that <code>this.$refs.priceGraph is undefined</code> (despite the Vue Dev Tools showing it's populated). See attached:</p>
  <p><a href="https://i.stack.imgur.com/iRu6W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iRu6W.png" alt="enter image description here" /></a></p>
  <p>What am I doing wrong?</p>