Pinia state doesn't update more than once.

[ImmortalBoi]

In my vue application, the structure is like this:
App.vue
-GroupWrapper
--GroupListing
-PeopleWrapper
--PeopleListing
-ConversationWrapper

I have a user store that uses pinia, and my main use of it is calling user.findChats() in the App.vue

App.vue

import { useChatStore } from './stores/chat'
import { useUserStore } from './stores/user'

const chat = useChatStore()
const user = useUserStore()

chat.findChats();

where it finds all the chats and if it's of the type "dm" it adds it to the dm_chats array and if it's the type "gm" it adds it to the gm_chats array,

chat.js

import { defineStore } from 'pinia'
import { db } from '../firebase'
import { collection, query, where, getDocs } from 'firebase/firestore'
import { useUserStore } from './user'

export const useChatStore = defineStore('chat', {
  state: () => ({
    dm_chats: [],
    gm_chats: [],
    user: useUserStore(),
  }),
  actions: {
    async findChats(id) {
      const chatsRef = collection(db, 'chats')
      const q = query(chatsRef, where('chat_users', 'array-contains', this.user.id))
      await getDocs(q).then((querySnapshot) => {
        querySnapshot.forEach((docu) => {
          if (docu.data().type == 'dm') {
            this.dm_chats.push(docu.id)
          } else {
            this.gm_chats.push(docu.id)
          }
        })
      })
    }
  }
})

Where the dm_chats should be displayed in a v-for in PeopleListing

PeopleWrapper.vue

<script setup>
import peopleListing from './people-listing.vue'
import { useChatStore } from '../../stores/chat'
import { storeToRefs } from 'pinia';

const chat = useChatStore()
const { dm_chats: chats } = storeToRefs(chat)
</script>

<template>
  <div>
    <div>
      Direct Chats
    </div>
    <div>
      <peopleListing v-for="dm_chat in chats" :dm_chat="dm_chat" />
    </div>
  </div>
</template>

and the same for gm_chats in GroupListing,

However after for looping over the array, the only update on screen is once, only when it fetches from firestore the document for a chat of type "gm", even tho when using Vue Devtools or console.log, the dm_chat and gm_chat are properly populated, it's just not updating them.

What I've tried was:

• Unified both stores into one file
• Changing the pinia syntax from option to setup
• Using reactive in the array when it was setup
• Using computed instead of storeToRefs both in setup and options syntax
• Tried the $subscribe method
• Tried the vue watch method

After all that, it had the same result.
Now this is probably me missing something very basic, but I can't for the life of me find out what it is. This also isn't with just the dm_chats or the gm_chats, this is with every other variable in both the user and chat stores. So if anyone could let me know what I'm missing, I'd be super thankful.