Firebase – typeerror cannot read properties of null reading uid, I have no asynchronous code and the users logged in any ideas?

I’m trying to create a user profile edit page where once you have logged in you are routed to this page and then the index returns your unique profile and not everyones profiles but I keep getting this error Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘uid’). I’ve looked up some of the reasons it could be and the user is logged in and i’m not using asynchronous code some I have no idea what the problem is I’m not sure if the uid isn’t getting through before the function runs or what it could be? Here is my vue.js script code on the page where it should display the profiles.

<script>

import getCollection from '../Composables/getCollection';
import getUser from '../Composables/getUser';
import getPremium from "../Composables/getPremium.js";

const {Premium, error, load} = getPremium();
load();





export default{
   
 
    
  setup() {
    const { user } = getUser()
    const { documents: Profile } = getCollection(
      'Premium', 
      ['userId', '==', user.value.uid]
    )
    console.log(Profile)

    return { Profile }
  }
}


</script>


<template>
<br><br>
<div v-if="error">{{ error }}</div>

<div v-if="Profile" class="Profile">
  <p class="text-5xl text-red-700 font-serif">Your Profile Statistics</p>
<div v-for =" Premium in Premium" :key="Premium.id">
<p class="text-5xl text-red-700 font-serif">Your Profile Statistics</p>
<p class="text-5xl text-red-700 font-serif">{{ Premium.name }}</p>
<br><br>
</template>

Here is where I am getUser.js page.

import { ref } from 'vue'
import { projectAuth } from '../firebase/config'

// refs
const user = ref(projectAuth.currentUser)

// auth changes
projectAuth.onAuthStateChanged(_user => {
  console.log('User state change. Current user is:', _user)
  user.value = _user
});

const getUser = () => {
  return { user } 
}

export default getUser

And this is my getCollection.js page.

import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'

const getCollection = (collection, query) => {

  const documents = ref(null)
  const error = ref(null)

  // register the firestore collection reference
  let collectionRef = projectFirestore.collection(collection)
    .orderBy('createdAt')

  if (query) {
    collectionRef = collectionRef.where(...query)
  }

  const unsub = collectionRef.onSnapshot(snap => {
    let results = []
    snap.docs.forEach(doc => {
      // must wait for the server to create the timestamp & send it back
      doc.data().createdAt && results.push({...doc.data(), id: doc.id})
    });
    
    // update values
    documents.value = results
    error.value = null
  }, err => {
    console.log(err.message)
    documents.value = null
    error.value = 'could not fetch the data'
  })

  watchEffect((onInvalidate) => {
    onInvalidate(() => unsub());
  });

  return { error, documents }
}

export default getCollection

As I said neither contain an asynchronous function, the user is logged in it shows up in the console and I’ve been trying to figure out what the problem could be i’ve looked at examples but can’t see any difference between them and mine, I’ve tried having it as a computed function too but that doesn’t work either any help would be greatly appreciated, thanks.