In Vue 3, I am trying to store the result (documents) of a Firestore collection query in an array. The official docs only describe this using forEach() but I would like to return a new array using map() as it seems to be faster for large collections.

It only logs "[object Object],[object Object]" to the console.

This is my code:

setup() {

    const myList = ref([])

    projectFirestore.collection("testcollection").where("name", "==", "Mike")
    .get()
    .then((querySnapshot) => {
        myList.value = querySnapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id }
        })
        console.log('This is my list: ' + myList.value)
    })
    .catch((error) => {
        //error
    });

    return { myList }
} 

How can I get the actual data in the myList array?

Thanks for any help!