title: Redraw Highcharts on Vuejs app
body: <p>I'm building a little pension calculator where I want to show the value of the pension pot depending on the users current and retirement age.</p>
  
  <p>I'm looking to take the user's data, number fields bound to a Vue model and then computing the value of the pot based on that data.</p>
  
  <p>That works just fine but having an issue with not being able to have Highcharts redraw the chart when the models change.</p>
  
  <p>The <code>redrawChart</code> method fires but the chart stays the same with the console telling me <code>Chart.redraw is not a function</code>.</p>
  
  <p>Redraw is an option for the Highcharts API so not sure where I'm failing.</p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div id="app"&gt;
   &lt;input type="number" min="55" v-model.number="age"  v-on:change="redrawChart"&gt;{{ age }}
   &lt;br&gt;
  &lt;input type="number" min="1" max="1000000" v-model.number="currentPensionValue" v-on:change="redrawChart"&gt;{{ currentPensionValue }}
  &lt;br&gt;
  &lt;input type="number" min="56" v-model.number="retireAge"  v-on:change="redrawChart"&gt;{{ retireAge }}
  &lt;br&gt;
  
  &lt;Chart :data="data" :steven="steven" :age-pot-value="agePotValue"&gt;&lt;/Chart&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the associated Vue code</p>
  
  <pre><code>const Chart = Vue.component('Chart', {
      props: ['data', 'steven', 'agePotValue'],
      template: `
      &lt;div&gt;
          &lt;p&gt;{{ data }}&lt;/p&gt;
  
          &lt;h1&gt;{{ steven }}&lt;/h1&gt;
          &lt;h1&gt;{{ agePotValue }}&lt;/h1&gt;
          &lt;div id="thechart"&gt;&lt;/div&gt;
      &lt;/div&gt;
      `,
      mounted() {
          var highchartsOptions = {
              chart: {
                  type: 'area',
                  renderTo: 'thechart'
              },
              credits: {
                  enabled: false
              },
              tooltip: {
                  enabled: false
              },
              title: {
                  text: ''
              },
              xAxis: {
                  allowDecimals: false,
                  title: {
                      text: 'Age'
                  }
              },
              yAxis: {
                  title: {
                    text: 'Pot Value'
                  },
                  labels: {
                      formatter: function () {
                      return '£' + this.value / 1000 + 'k';
                    }
                  },
                  opposite: true,
              },
              plotOptions: {},
              series: [{
              name: '',
              data: this.agePotValue
          }],
              credits: false
          }
              Highcharts.chart(highchartsOptions)
      }
  });
  
  new Vue({
      el: '#app',
      data: {
          age: 55,
          currentPensionValue: 22000,
          retireAge: 87
      },
      computed: {
          data() { return (this.currentPensionValue) / (this.retireAge - this.age) },
          steven() { return this.data * 1.4 },
          agePotValue() {
        var vm = this;
        var agePotValue = [[vm.age, (vm.data)], [vm.retireAge, vm.currentPensionValue]];
  
        return agePotValue;
      }
      },
      components: { Chart },
      methods: {
          redrawChart() {
        Chart.redraw();
          }
      }
  })
  </code></pre>
  
  <p>Here's the the fiddle <a href="https://jsfiddle.net/stevieg_83/naLqzunz/11/" rel="nofollow noreferrer">https://jsfiddle.net/stevieg_83/naLqzunz/11/</a></p>
  
  <p>Any help appreciated.</p>