How to load Firebase data before drawing Vue component - firebase

Question

I have a firebase database connection. I can upload data. I can get data.
But during mounted cycle, my build_view jsonz = undefined. Nothing gets drawn. When I navigate to another page and then back to build_view, the data from the db is present and drawn.
build_view.vue
<template>
<div **v-if="jsonz"** id="outerdivFullPage" class="roundedz d-block my-0 w-100 float-center mx-auto">
<div class="row mx-1 mb-5">
<div class="col-4 mb-3">
<img class="icon-xl mx-auto d-block" src="../img/main/professions/guardian.png">
<builder v-for="x in this.jsonz.guardian[0]"
class=""
:key="x"
:name="x.name"
:link="x.link"
:chatCode="x.chatCode"
:type="x.type"
:support="x.support"
:profession="x.profession"
></builder>
</div>
</div>
</template>
<script>
import builder from '../components/build_component.vue'
import crudService from "../services/crudService";
export default {
name: 'build_view',
data(){
return{
jsonz: false,
clazz: "",
profession: "",
name: "",
link: "",
chatCode: "",
type: "",
support: "",
hover: false
}
},
methods: {
**async getAll()**{
this.jsonz = crudService.getAll();
}
},
components: {
builder
},
created(){
console.log("CREATED");
this.**getAll()**;
},
mounted: function(){
console.log("MOUNTED");
console.log(**this.jsonz**); // undefined
}
}
</script>
CrudService.js
import firebase from "../firebase";
let db = firebase.ref("/array");
class CrudService {
**getAll()** {
var childData;
db = firebase.ref("/array")
db.on('value',function(snapshot){
snapshot.forEach(function(childSnapshot){
childData = childSnapshot.val();
})
})
return childData;
}
}
export default new CrudService();
More details here: