title: How to update chart using mixin on state change?
body: <p>I've mapped <code>chartData</code> to a state property using vuex. What I'd like to do is update the chart when a dataset is updated. The mixin automatically sets a watcher on <code>chartData</code> according to the <a href="https://vue-chartjs.org/#/home?id=reactive-data" rel="nofollow noreferrer">documentation</a> but I'm unsure how to use it with vuex.</p>
  
  <p>LineChart.js:</p>
  
  <pre><code>import { Line, mixins } from "vue-chartjs";
  const { reactiveProp } = mixins;
  
  export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ["options"],
    mounted() {
      this.renderChart(this.chartData, this.options);
    }
  };
  </code></pre>
  
  <p>MarketChart.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;line-chart :chart-data=chartData :height=height :options=options&gt;&lt;/line-chart&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import LineChart from "./LineChart.js";
  import { mapGetters, mapState } from "vuex";
  
  export default {
    components: {
      LineChart
    },
    data() {
      return {
        height: 200
      };
    },
    computed: {
      ...mapState({
        chartData: "chartData",
        options: "chartOptions"
      })
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The store data path is <code>chartData.datasets[i].data</code>.</p>
  
  <p>The chart initially renders correctly and I know the data is correctly updated in the state (after updating the state, if I trigger hot reloading in development it re-renders the chart with the updated data) but the chart isn't updating. How can I use the mixin with mapped state variables or otherwise trigger an update on state change?</p>