How can my code await the firebase responce before returning the object

Question

My code works, and the console.log is showing the object, and if i go to my firebase console and change the data then it is updated in realtime.

However when initially direcred by my router to the PlaylistDetails.vue it is taking the empty fields and displaying them whilst my program talks to firebase, when data is returned the console prints but my fields are still blank.

im assuming i need to get an async await function in there somewhere, or v:bind

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 };
  },
};