title: chartJS pie chart not updating after axios GET
body: <p>In my Vue app I'm loading a page and it grabs some data from my Flask backend. I draw a bunch of elements and I also draw a pie chart based on an array of 3 values returned from the backend. When I get the response I update <code>this.pie_data</code> and I thought this would update in my template to reflect the pie chart. It renders the elements that get set in <code>this.nvrs</code> so not sure why it doesn't work for my pie chart.</p>
  
  <p>Appreciate the help.</p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;p class="title"&gt;System Overview&lt;/p&gt;
    &lt;chart :type="'pie'": data=chartData&gt;&lt;/chart&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>import axios from 'axios'
  import Chart from 'vue-bulma-chartjs'
  
  export default {
    name: 'NVR_Overview',
    components: {
      Chart,
    },
    data: () =&gt; ({
      nvrs: [],
      // Health, Down, Warn
      pie_data: [],
    }),
    methods: {
      goToNVR (nvrId)
      {
        let wpsId = this.$route.params['wpsId']
  
        let path = '/wps/' + wpsId + '/nvr/' + nvrId
        this.$router.push(path)
      },
    },
    created ()
    {
      axios
        .get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
        .then(response =&gt;
        {
          this.nvrs = response.data['nvr_list']
          this.pie_data = response.data['pie_data']
          console.log(this.pie_data)
        })
        .catch(e =&gt;
        {
          console.log(e)
        })
    },
    computed: {
      chartData ()
      {
        return {
          labels: ['Healthy', 'Down', 'Warning'],
          datasets: [
            {
              data: this.pie_data,
              backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
            },
          ],
        }
      },
    },
  }
  </code></pre>