title: User.displayName not accessible inside the script but available in template in VueJs?
body: <p>I have a Current User composable that I am importing in my function but it returns undefined when I try to access any of the properties of the user object. Can you please help me, I am new to Vue?</p>
  <p>Here is my template in which I am invoking the user's properties.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;p&gt;Process Payroll&lt;/p&gt;
    &lt;h1&gt;{{ user.displayName }} &lt;/h1&gt;
    &lt;h1&gt;{{ docs }} &lt;/h1&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import getUser from '@/composables/getUser'
  import { ref, onMounted } from 'vue'
  import { projectFirestore, projectAuth } from '@/firebase/config'
  import { useRouter, useRoute } from 'vue-router'
  
  export default {
      setup() {
      const { user } = getUser();
      const lastName = ref(&quot;&quot;);
      const firstName = ref(&quot;&quot;);
      const docs = ref([]);
  
      const returnUser = async () =&gt; {
        const res = await projectFirestore
          .collection(&quot;users&quot;)
          .where(&quot;displayName&quot;, &quot;==&quot;, user.displayName)
          .get();
        if (!error.value) {
          // check your response here.
          console.log(res);
          const doc = res.filter((userObj) =&gt; {
            if (user.displayName === userObj.data().displayName) {
              return user.lastName;
            }
          });
          docs.value = doc;
        }
      };
  
          onMounted(returnUser)
  
      return { user, docs, returnUser};
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>User.displayName is undefined in my returnUser function but is available to be displayed in the template on the top. How can I access the user.displayName property in my returnUser function?</p>
  <p>Composable:</p>
  <pre class="lang-js prettyprint-override"><code>import { ref } from 'vue'
  import { projectAuth } from '../firebase/config'
  
  // refs
  const user = ref(projectAuth.currentUser)
  
  // auth changes
  projectAuth.onAuthStateChanged(_user =&gt; {
    console.log('User state change. Current user is:', _user)
    user.value = _user
  });
  
  const getUser = () =&gt; {
    return { user } 
  }
  
  export default getUser
  </code></pre>