I'm using a v-for loop on the template but even though the v-for loop feeds all items with same data object userCollections, only the ones I call the function from get their lengths and items updated. I'm rendering one button on each item to call the function. In summary the line below updates the array BUT only the one item within the v-for loop that calls the function. They all start the with the same global array, but then when I add more items to that array (from within each item), it's like each item has their own userCollections array, even though I'm updating the "global" Vue data object: userCollections...

 this.userCollections.push({id: doc.id, ...doc.data()})

My template:

 <div v-for="(col, index) in userCollections" :id="col.id" :ref="col.id" class="collRow" @click="addToCollection($event, col.id)">             
    <p >{{col.name}} </p>
               
    <p v-if="col.shortDescription">{{col.shortDescription}}</p>
    <button @click=refreshUserColl(userAddress)>refresh</button>
</div>  

As stated in Vue's documetantion, Vue cannot detect some changes to arrays: https://v2.vuejs.org/v2/guide/reactivity.html?redirect=true#For-Arrays I'm assuming this is the root of my problem, so I'm trying to use a workaround suggested on the link. I'm using a forEach loop and I'm struggling to get the right syntax. My code:

async refreshUserColl(userAddress) {
    let vm = this
    let collsRefs = collection(db, "users", userAddress, 'Collections'); // getting data from Google Firestore
    const qSnap = await getDocs(collsRefs);
    this.userCollections = []
    qSnap.docs.forEach((doc) =>{
        console.log(this)
        
        this.set(vm.userCollections.push({id: doc.id, ...doc.data()})) <--- problem
    })
    
}

notice the this.SET(vm.userCollections...) which is basically me bluntly trying to translate the instructions on Vue's documentation Vue.set(vm.items, indexOfItem, newValue)

I'm getting this error

Any help would be much appreciated.