Estoy usando Vue para la parte frontal de la aplicación donde tengo el bloque <div v-if=""> como se muestra a continuación:

 <div class="panel"> <div class="panel-body"> <div v-if="this.databaseSyncInProgress" class="col-12 d-flex justify-content-center mt-10"> <moon-loader :loading="true" :color="'#3e8ef7'"></moon-loader> Database sync in progress... </div> <div v-if="!this.databaseSyncInProgress" class="row"> <div> <h4>Synchronize database</h4> <button type="button" class="btn btn-primary" style="float: center" @click="syncAll" > Sync database </button> </div> </div> </div> </div> <script> import MoonLoader from 'vue-spinner/src/MoonLoader.vue' export default { name: 'BackboneFetchAll', data() { return { } }, components: { MoonLoader }, } </script>

Entonces, básicamente, cuando this.databaseSyncInProgress sea true , el control giratorio debería aparecer con un texto Sincronización de la Database sync in progress... . Todo funciona bien, pero el texto Sincronización de la Database sync in progress... no está debajo de la rueda giratoria, sino arriba en el lado derecho, como se muestra a continuación :

¿Cómo cambio el texto para que esté debajo de la rueda giratoria?