Fetch data through pinia store in nuxt3 project on ssr

I'm trying to create a Pinia store where I can collect and modify the data that is fetched in my application.

From my components, I want to just call the store in order to get the data needed, and then the store will take responsibility for caching and modifying the data.

vercelStore.ts:

export const useVercelStore = defineStore('VercelStore', {  state: () => ({    stats: {} as any,  }),  actions: {    async fetchStats(ssr: boolean = true) {      // Dont fetch if data already exists with valid TTL      if (this.stats && this.stats.ttl > new Date()) {        return      }      const { data, error } = useCustomFetch('/status/vercel', {        server: ssr,      })      if (data.value) {        this.stats = {          ttl: setTTL(5),          data: data.value,        }      }      if (error.value) {        this.stats = {          ttl: setTTL(2),          data: null,        }      }    },  },})

My component:

const vercelStore = useVercelStore()const { fetchStats } = vercelStoreconst vercelData = computed<UsageData | null>(() => vercelStore.stats.data)await fetchStats()

I currently have 2 issues. When fetching data withssr=true, it seems to work as expected because the data is loaded, but I get a mismatch:

rendered on server: <!---->  - expected on client: Symbol(v-fgt) 

Second issue is that when ssr=false the request is correctly sent through the client but the store is never populated with the response of the request.

How can I structure my setup to make it work correctly?