Асинхронный created

Есть async created метод. Проблема в том, что страница рендерится раньше, чем загрузятся данные. Из-за этого в console я вижу много ошибок с null. Как избавиться от этой проблемы?

<template>
    <v-app
        id="inspire"
    >
        <Course
            :course="course"
            v-show="!loading"
        />
        <Loading
            class="text-center"
            v-show="loading"
        />
    </v-app>
</template>

<script>
    import Loading from "../components/Loading";
    import Course from "../components/Course";
    export default {
        name: 'Classes',
        components: {Course, Loading },
        created: async function() {
            this.settings = this.$store.state.settings;
            this.loading = true;
            this.courses = await this.$store.dispatch('getCourses');
            if (Object.keys(this.classes).length === 0) {
                this.loading = false;
                await this.$router.push('/checking'); // checking == error
                return;
            }
            this.loading = false;
        },
        data: () => ( {
            course: null,
            loading: null,
            settings: null,
        }),
    };
</script>