LineChart.vue

<script>
import { Line, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: {
    chartdata: Object,
    options: Object,
  },
  mounted() {
    this.renderChart(this.chartdata, this.options);
  },
};
</script>

MainComponent.vue

<template>
  <line-chart :chart-data="chartData" :options="options"></line-chart>
</template>

<script>
import axios from 'axios';
import LineChart from './LineChart.vue';

export default {
  name: 'Dashboard',
  components: {
    LineChart,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      chartData: null,
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
  
  mounted() {
    this.getGlobalData();
  },
  methods: {
    // Method
getGlobalData() {
      let apiUrl = '';
      if (this.state) {
        apiUrl = `${this.siteUrl}/wp-json/charts/v1/global/${this.state}`;
      } else {
        apiUrl = `${this.siteUrl}/wp-json/charts/v1/global`;
      }
      axios(apiUrl)
        .then((response) => {
          if (response.status === 200) {
            // GET AND PARSE THE DATA
            // CREATE THE NEW DATASETS
            const datasets = [
              {
                //PROPS
              },
              {
                //PROPS
              },
              {
                //PROPS
              },
            ];
            // Redeclarate the chartData
            this.chartData = {
              labels,
              datasets,
            };
          } else {
            /* eslint no-console: "off" */
            console.log('Error en estados');
          }
        })
        .catch((error) => {
          /* eslint no-console: "off" */
          console.log('error :', error);
        });
    },
    //.....
  },
};
</script>