vue 3 composition api hooks and data rendering - vue.js

Question

I would like to show data in template when the page loads after i fetch the data from a database.
The data is returned with async/await.
The select menus I use for filtering are now reactive only once I select a value from the menu. But I would like the full(unfiltered) data array to show when the page first loads and before any filters are applied.
How can I wait untill the data is fully fetched besore passing it to my template ?
<template>
<div class="mp" style="width: 100vw;">
<div class="col-2">
<span class="lbl">FILTER1</span>
<select v-model="selectedMA" class="form-select" >
<option value="">all</option>
<option value="Germany">Germany</option>
</select>
</div>
<div class="col-2">
<span class="lbl">FILTER2</span>
<select v-model="selectedMA2" class="form-select" >
<option value="">all</option>
<option value="Tier1">Tier1</option>
</select>
</div>
<p>DATA :</p>
<p> {{actorListTest2}} </p>
</div>
</template>
<script >
import {watchEffect, ref, computed} from 'vue'
import getActorDocs from '../composables/getActorDocs'
export default {
setup(){
const {actorDocs, loadActors} = getActorDocs()
const selectedMA = ref("")
const selectedMA2 = ref("")
loadActors();
var filteredActors = actorDocs
const actorListTest2 = computed(() => {
if(selectedMA == null && selectedMA2 == null){return filteredActors}
if(selectedMA.value == "" && selectedMA2.value == ""){return filteredActors}
else {
return filteredActors.filter(obj => {
return (!selectedMA2.value.length || obj.type == selectedMA2.value)
&& (!selectedMA.value.length || obj.country == selectedMA.value)
})}
});
watchEffect(() => console.log(actorListTest2.value))
return {filteredActors, actorListTest2, selectedMA, selectedMA2, actorDocs}
}//setup
}
</script>
As requested, here is getActorDocs():
import {ref} from 'vue'
import { projectFirestore } from '../firebase/config'
import { collection, getDocs } from "firebase/firestore";
const getActorDocs = () => {
const actorDocs = []
const error = ref(null)
const loadActors = async () => {
try {
const querySnapshot = await getDocs(collection(projectFirestore, "actors"));
querySnapshot.docs.map(doc => {
actorDocs.push(doc.data())
})
} catch (err) {
error.value = err.message
console.log(error.value)
}
}
return { actorDocs, error, loadActors}
}
export default getActorDocs