Mi código funciona, y el archivo console.log muestra el objeto, y si voy a mi consola Firebase y cambio los datos, se actualiza en tiempo real.

Sin embargo, cuando mi enrutador lo dirige inicialmente a PlaylistDetails.vue, toma los campos vacíos y los muestra mientras mi programa habla con firebase, cuando se devuelven los datos, la consola se imprime pero mis campos aún están en blanco.

supongo que necesito obtener una función de espera asíncrona en algún lugar, o v: enlazar

 export default { props: ["id"], setup(props) { const db = getFirestore(); const docRef = doc(db, "playlists", props.id); const playlist = { id: "", title: ""}; const unsub = onSnapshot(docRef, (doc) => { playlist.id = doc.id; playlist.title = doc.data().title; console.log(playlist); }); watchEffect((onInvalidate) => { onInvalidate(() => unsub()); }); return { playlist }; }, };