I am currently utilizing Vue-ChartJS to showcase a chart on my website. However, I have encountered an issue when trying to update the datasets using the Push Function - the chart does not update as expected (even though it should according to the documentation). Interestingly, directly setting the reactive variable does update the chart successfully (e.g., this.transaction = Object). While the current ChartComponent is functioning in this manner, I aim to retrieve data from an API and incorporate it into 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 (utilizing direct set)

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

      Statistics

      <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">Week</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('month')" class="btn btn-primary">Month</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('year')" class="btn btn-primary">Year</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <label for="custom_from" class="mx-sm-2">From:</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">To:</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: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        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 (utilizing 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: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        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)
    }
  },
}