Cuando uso accesorios para pasar un objeto al componente secundario, no puedo usar los accesorios dentro de la función de configuración (API de composición). Estoy tratando de usar los accesorios para ejecutar una consulta desde Firebase usando la propiedad displayName del usuario en lugar de usar 'Abe'. ¡Soy nuevo en Vue, por favor ayúdenme!

 <template> <div v-if="user"> <Process :user="user"/> </div> <div v-else> <h1>Loading user</h1> </div> </template> <script> import Process from '../views/Process.vue' import getUser from '@/composables/getUser' export default { components: { Process }, setup(){ const { user } = getUser(); return {user} } } </script>

El uso de usuario en la función de configuración da un error indefinido, pero usarlo en la parte superior de la plantilla devuelve el objeto correcto.

 <template> <p>Process Payroll</p> <h1>{{ user.displayName }} </h1> <h1>{{ docs }} </h1> </template> <script> // import getUser from '@/composables/getUser' import { ref, onMounted, watch } from 'vue' import { projectFirestore, projectAuth } from '@/firebase/config' import { useRouter, useRoute } from 'vue-router' export default { props: ['user'], setup() { // const { user } = getUser(); // watch(()=> user, () => returnUser()) const lastName = ref(""); const firstName = ref(""); const docs = ref(""); const returnUser = async () => { const res = await projectFirestore .collection("users") .where("displayName", "==", "Abe") // Case sensitive .get(); const lastNameList = res.docs.map(d => `Abe ${d.data().lastName}`) console.log(lastNameList) console.log(user) console.log(user.displayName) docs.value = lastNameList; } onMounted(returnUser) return { docs, returnUser}; }, } </script>