Why is data not being passed to the component?

Question

Vue.js

Hello!
Can anyone advise please?
I don’t understand the data I get from the server, I checked everything is fine, I
insert them into the app-analytics-chart component, I get undefined for some reason?

<template>
<div>
    <h1>Аналитика по заказам</h1>
    <app-analytics-chart 
        title="месяц" 
        :labels="months" 
        :data="analytics.countOrdersByMonth" />

</div>
</template>

<script>
import AppAnalyticsChart from '@/components/pages/admin/AnalyticsChart'
import moment from 'moment'

export default {
    components: {
        AppAnalyticsChart
    },
    data: () => ({
        analytics: [],
    }),    

    mounted() {
        this.loadOrders()
    },

    methods: {
        async loadOrders() {
            try {
                const res = (await this.$http.get('/analytics')).data
                this.analytics = res
                // console.log(res);

            } catch (error) {

            }
        }
    }    
}
</script>

in the component I get analytics.countOrdersByMonth = undefined

Answer 1

Or maybe you don’t need to render the component until the data has arrived? Then undefined will not be passed.

<app-analytics-chart v-if="analytics.countOrdersByMonth"