Invalid prop: type check failed for prop "chartData". Expected Object, got Undefined

Question

new to programming and having problems trying to render a chart from a dummy data. This is the error " Invalid prop: type check failed for prop "chartData". Expected Object, got Undefined". Basically send data from parent to child component and have it rendered. Having some trouble to send the data correctly dunno what to do. parent index.vue

<template>
  <bar-chart/>
</template>
<script>
import BarChart from '../components/BarChart.vue'
import fake, { day, profit, total } from '../static/dummy'
export default {
  name: 'App',
  components: { BarChart },
  data(){
    return {
     day : 0,
     profit : 0,
     total : 0,
      chartData: {},
    };
  },
  created(){
    this.getDataa();
  },
  mounted(){
    this.getDataa();
  },
  methods: {
    getDataa(){
      this.day = fake.day;
      this.profit = fake.profit;
      this.total = fake.total
      this.chartData = {
        labels: [this.day],
        datasets: [
          {
            label: "profit",
            data: [this.profit],
            backgroundColor: '#90EE90'
          },
          {
            label: "total",
            data: [this.total],
            backgroundColor: '#68BBE3',
          }
        ],
      }
      },
    },
  computed: {
      getDay :function() {
        return this.day;
      },
      getProfit :function(){
        return this.profit;
      },
      getTotal: function(){
        return this.total;
      }
    },
}
</script>

child BarChart.vue

<template>
  <bar-chart :chart-data ="chartData"></bar-chart>
</template>
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  props:{
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      options: {
        responsive: true,
        scales: {
          xAxes: [
            {
              stacked: true,
            },
          ],
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },
    };
  },
  mounted (){
    console.log(this.chartData);
    this.renderChart(this.chartData, this.options);
  }
}
</script>

dummy data dummy.js

  exports.day=[
    {
      id:1,
      day: "9/21",
    },
    {
      id:2,
      day: "9/22",
    },
    {
      id:3,
      day: "9/23",
    },
    {
      id:4,
      day: "9/24",
    },
    {
      id:5,
      day: "9/25",
    },
]
exports.profit = [
  {
    id:1,
    profit:"200",
  },
  {
    id:2,
    profit:"300",
  },
  {
    id:3,
    profit:"400",
  },
  {
    id:4,
    profit:"500",
  },
  {
    id:5,
    profit:"600",
  },
]
exports.total = [
  {
    id:1,
    total:"1000",
  },
  {
    id:2,
    total:"2000",
  },
  {
    id:3,
    total:"3000",

  },
  {
    id:4,
    total:"4000",
  },
  {
    id:5,
    total:"5000",
  },
]

Answer 1

well problem was at different thing i use vue.js 2 and my chart file was vue chart import was legacy but legacy doesnt work when i switched to import bla2 from vue-chartjs it worked. but your advice helped @kissu thx