vue.js рендерит компонент

Возникает проблема с рендерингом.

У меня есть компонент, внутри которого есть ещё один.

A.vue:

<template>
    <v-app
        class="custom-app custom-debug"
        style="background-color: #ffffff;"
    >
        <B
            v-show="!loading"
            :cl="class_"
        />
    </v-app>
</template>
<script>
    import B from "../components/blocks/B";
    export default {
        name: 'A',
        components: { B },
        async created() {
            this.loading = true;
            this.blocks = await this.$store.dispatch('getBlocks');
            this.loading = false;
        },
        data: () => ( {
            class_: null,
            loading: true;
        } ),
    };
</script>

B.vue:

<template>
    <v-btn>
        <v-progress-circular
            :value="100 * cl.solved_blocks / cl.amount_blocks"
        />
    </v-btn>
</template>
<script>
    export default {
        props: ['cl']
        },
    }
</script>

Как Вы можете видеть, я выставляю флажок loading = false, который должен блокировать показ (рендеринг компонента) до того момента, пока не загрузятся данные из vuex. При этом, во vuex выполняются две вложенные асинхронные функции (сейчас они замоканы и там просто стоит таймаут на 500мс). При этом, в консоле браузера, я вижу следующее:

found in
—-> <B> at src/components/blocks/B.vue
       <VApp>
         <Class> at src/views/A.vue
           <VContent>
             <App> at src/App.vue
               <Root>```

Иными словами, рендеринг всё-таки происходит, потому как движок **JS** добрался до `solved_blocks`, который используется внутри `B.vue`