vue-chartjs в laravel, vuejs с использованием API Axios

Question

Я пытаюсь показать все компании на Диаграмме в Dashboard.vue по годам, но это ничего не показывает, и я уже много дней пытаюсь, если кто-то сможет мне помочь, это будет так мило с его стороны.

Мой API / Маршрут:

Route::apiResources(['company'=>'API\CompanyController']);

Код EmployeeController:

public function index(){return Employee::all();}

Код в диаграмме. vue is:

<script>
import { Line } from "vue-chartjs";
export default {
  extends: Line,
  data() {
    return {
      url: "api/company",
      years: [],
      labels: [],

      data: ""
    };
  },

  methods: {
    getProducts() {
      axios.get(this.url).then(response => {
        this.data = response.data;
        if (this.data) {
          this.data.forEach(element => {
            this.years.push(element.created_at);
            this.labels.push(element.name);

          });
          this.renderChart(
            {
              labels: this.years,
              datasets: [
                {
                  label: "list of Companies ",
                  backgroundColor: "#f87979",
                  data: this.name
                }
              ]
            },
            { responsive: true, maintainAspectRatio: false }
          );
        } else {
          console.log("NO DATA");
        }
      });
    }
  },
  mounted() {
    this.getProducts();
  }
};
</script>

Код в app.js:

Vue.component('chart-component', require('./components/Chart.vue'));

Код в Dashboard:

<template>
  <div class="container">

    <chart-component></chart-component>
  </div>
</template>

Answer 1

Я решил, проблема в том, что я не поставил .default, поэтому я изменяю его, как показано ниже:

Vue.component('chart-component', require('./components/Chart.vue').default);