Vue-ChartJS datasets push not updating chart

Question

I'm using Vue-ChartJS to display a chart on my webpage. So, when I update the datasets using the Push Function the chart is not updating (it is said that it should update the view). Using direct set to the reactive variable is updating the chart (like this.transaction = Object). Current ChartComponent is working like this, but I want to get data from an API and add it to the view.

LineChart.js

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],

  mounted () {
    this.renderChart(this.chartData,  this.options)
  }
}

ChartComponent.vue (using direct set)

<template>
<div class="card">
    <div class="card-header">

      Статистика

      <div class="float-right">
        <form method="POST" class="form-inline">
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('week')" class="btn btn-primary">Седмица</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('month')" class="btn btn-primary">Месец</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('year')" class="btn btn-primary">Година</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <label for="custom_from" class="mx-sm-2">От:</label>
            <input id="custom_form" type="date" class="form-control" />
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <label for="custom_to" class="mx-sm-2">До:</label>
            <input id="custom_to" type="date" class="form-control" />
          </div>
        </form>
      </div>
    </div>
    <div class="card-body p-0">
      <div class="p-4">
        <line-chart :options="options" :chart-data="transactions"></line-chart>
      </div>
    </div>
  </div>
</template>

import LineChart from './LineChart.js'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      transactions: {},
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.transactions = {
        labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
        datasets: [{
          label: 'Users',
          data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }]
      }
    },
    updateChart (period) {
      console.log('Chart updated for period: ' + period);
      this.transactions = {
        labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
        datasets: [{
          label: 'Users',
          data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }, {
          label: 'Users',
          data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }]
      }
      console.log(this.transactions)
    }
  },
}

ChartComponent.vue (using push function)

import LineChart from './LineChart.js'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      transactions: {},
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.transactions = {
        labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
        datasets: [{
          label: 'Users',
          data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }]
      }
    },
    updateChart (period) {
      console.log('Chart updated for period: ' + period);
      this.transactions.datasets.push({
        label: 'Users',
        data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
        backgroundColor: 'rgba(66, 165, 245, 0.5)',
        borderColor: '#2196F3',
        borderWidth: 1
      });
      console.log(this.transactions)
    }
  },
}

Answer 1

It might be Vue reactivity problem. You need to update references to this.transactions to make Vue reactive

updateChart(period) {
  console.log('Chart updated for period: ' + period);
  this.transactions.datasets.push({
    label: 'Users',
    data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
    backgroundColor: 'rgba(66, 165, 245, 0.5)',
    borderColor: '#2196F3',
    borderWidth: 1
  });
  this.transactions = JSON.parse(JSON.stringify(this.transactions))
}