title: How to update a chart using VueJS and ChartJS
body: <p>I'm trying to update a chart using VueJS and ChartJS and so far i can access every property of the object but if i try to change the object's property i get an error :</p>
  
  <pre><code>[Vue warn]: Error in mounted hook: "TypeError: _chart_data_js__WEBPACK_IMPORTED_MODULE_5__.planetChartData.update is not a function"
  </code></pre>
  
  <p>I went to ChartJS's tutorial section and issues sections but i couldn't find any clue for this problem.
  What i find strange is that the 'push' function is working perfectly fine.
  So far what i'v try is :</p>
  
  <p><strong>.vue file</strong></p>
  
  <pre><code>&lt;template&gt;
              &lt;div id="app" style="position: relative; height:500px; width:500px"&gt;
                  &lt;canvas :width="300" :height="300" id="planet-chart"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
  
  
   &lt;/template&gt;
  
  ...
  
  import { mapActions, mapState } from 'vuex'
  import Chart from 'chart.js';
  import {planetChartData,pie} from './chart-data.js';
  // import { mapActions } from 'vuex'
  // import { connectionsAlive } from '../../api/mkt-api.js'
  export default {
      mounted() {
          var x=this.createChart('planet-chart', this.planetChartData)
          planetChartData.data.labels.push('Janvier', 'Février')
          planetChartData.update();
      },
      data () {
          return {
              planetChartData: planetChartData,
          }
      },
      methods: {
          createChart(chartId, chartData) {
              const ctx = document.getElementById(chartId);
              const myChart = new Chart(ctx, {
              type: chartData.type,
              data: chartData.data,
              options: chartData.options,
              });
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>And .js file</strong></p>
  
  <pre><code>export const planetChartData = {
      type: 'bar',
      data: {
        labels: ['Janvier', 'Février', 'Mars', 'Avril'],
        datasets: [
          { // one line graph
            label: 'Number of users',
            data: [3018, 3407, 3109,1060],
            backgroundColor: [
              'rgba(54,73,93,.5)', // Blue
              'rgba(54,73,93,.5)',
              'rgba(54,73,93,.5)',
              'rgba(54,73,93,.5)'
            ],
            borderColor: [
              '#36495d',
              '#36495d',
              '#36495d',
              '#36495d'
            ],
            borderWidth: 3
          },
        ]
      },
      options: {
        responsive: true,
        lineTension: 1,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              padding: 40,
            }
          }]
        }
      }
    }
  </code></pre>
  
  <p>Maybe i'm using the wrong syntax, if anyone has an idea let me know, thanks.
  Regards.</p>