vue 3 composition api hooks and data rendering

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