How to call the vue-loading-spinner preloader on the main page before the main component has loaded?

Question

Vue.js

I want to call the preloader on the main page until the main vue component of the application is loaded.
Involved vue-loading-spinner. But the spinner doesn't appear
Here is my code

<template>
<div>
<div style="position: absolute; z-index: 4; margin: 0 auto; top: 64px; width: 100%">
            <main_search  v-if="main_search"></main_search>
            <card v-if="show_card" :change="get_change_card"></card>
        </div>
        <double-bounce v-if="loading"></double-bounce>
</div>
</template>
<script>
    import card from "../cards/main_card"
    import {DoubleBounce} from 'vue-loading-spinner';

export default {
        components: {
            card,
            DoubleBounce
},
beforeCreate: function() {
            this.loading = true;
            console.log("beforeCreate");
        },
data: () => ({
            loading: false,
},
 created(){
             console.log('created');
             this.loading = false;
        },

Answer 1

a separate spinner on the page, outside the main container (#app), visible by default. More or less like this

.spinner { display: none; }
body:not(.app-mounted) .spinner {
  display: block;
}

and event handling

new Vue({
  …
  mounted(){
    this.$nextTick(()=>document.body.classList.add('app-mounted'));
  }
});