Chart.js is not reactive when data chagne

[ittus]

Example: https://codesandbox.io/s/5mrzwp5q4p

In above example, when click on Change Data, data is changed but it's not updated in chart

<template>
  <div id="app">
    <button @click="changeData">Change Data</button>
    <chart :type="'pie'" :data="data" :options="options"></chart>
  </div>
</template>

<script>
import Chart from "./components/Chart.vue";

export default {
  name: "App",
  components: {
    Chart
  },
  data() {
    return {
      data: {
        labels: ["Sleeping", "Designing", "Coding", "Cycling"],
        datasets: [
          {
            data: [20, 40, 5, 35],
            backgroundColor: [
              "#1fc8db",
              "#fce473",
              "#42afe3",
              "#ed6c63",
              "#97cd76"
            ]
          }
        ]
      },
      options: {
        segmentShowStroke: false
      }
    };
  },
  methods: {
    changeData() {
      this.data = {
        labels: ["Sleeping", "Designing", "Coding", "Cycling"],
        datasets: [
          {
            data: [1, 2, 3, 4],
            backgroundColor: [
              "#1fc8db",
              "#fce473",
              "#42afe3",
              "#ed6c63",
              "#97cd76"
            ]
          }
        ]
      };
    }
  }
};
</script>

Especially, when data came from computed properties, chart will not be updated.
https://stackoverflow.com/q/50419627/2303610

[jakeYeager]

Re-render the chart with the new data: apertureless/vue-chartjs#353
Apertureless has some good docs for working with Vue/ChartJS and works in principal with this repo: http://vue-chartjs.org/#/home?id=reactive-data

[ittus]

@jakeYeager This repo doesn't use vue-chartjs. It consumes chartjs package directly.

[jakeYeager]

Right, if I understand what you are trying to do, you have to either bind the data as an input to your model, otherwise find a way to re-load the chart with the new data (i.e. v-if condition). apertureless offers some methods on how to achieve this. If I can find some time I'll try and codepen an example.