How to make a component wait for an async in a composable?

[3aluw]

When the app mounts, it runs a function called "initUser"(in a composable) that fetches data and assign it to “loggedInUser.value”.

async function initUser(userId) { 

  try {
        const res = await dbRestRequest(`/users/${userId}`);
  
        loggedInUser.value = res.data;
      } 

the same cmposable (named Deskree) has a user object which has a function that just returns the loggedInUser object:

const user = {
     get () {

      return  loggedInUser;

    },}

on the user page i want to execute the get function to get the user data:

//on the user page
  onMounted(() => {

       console.log(

       //log it with value notation-- logs null

           Deskree.user.get().value,

     //log it without value notation-- logs the wanted object with a proper value on it

           Deskree.user.get())

   });

So the object has the value property, but accessing it returns null. WHY?

just to make sure it is an async problem, I tried to use a timeout of 500ms and 5s

setTimeout(() => console.log(Deskree.user.get().value), 10000)
setTimeout(() => console.log(Deskree.user.get().value), 1000)

I got the desired result after 5s; so the get() function isn't waiting for initUser();

So now i have two questions :
if the object has the value property why accessing it returns null ?
How to make user.get function waits to initUser() to fullfill ?

[LinusBorg]

if the object has the value property why accessing it returns null ?
It has the property, but the values hasn't been assigned yet at that moment as the async function is still runnning.

when you look at it in the console, you likely look at it after the value has been assigned, so now it works.

How to make user.get function waits to initUser() to fullfill ?

You generally would not. You would use a v-if in the component's template to not render the conent in question until the user is present. reactivity will take care of the rest.

<div v-if="Deskree.user.get().value">

In advanced scenarios you can await code in setup but that requires using the experimental Suspense component and is usually not the first thing to reach for.