How to update website title and favicon dynamically with Vue 3 and VueFire?

I’m using Vue 3 and Pinia to build a web, I fetch the data on a Pinia Store from Firestore using VueFire with: const placeInfo = useDocument(() => doc(db, 'places', placeName), { once: true }); and then I populate the page… The template render the data when it arrives just fine, but I can’t change the title and favicon’s URL:

const favicon = document.querySelector("link[rel~='icon']");

document.title = placeStore.placeInfo.placeTitle;
favicon.href = placeStore.placeInfo.placeFaviconUrl;

It just renders undefined.

I have this inside my Pinia Store:

import { defineStore } from 'pinia';
import { useFirestore, useDocument } from 'vuefire';
import { doc } from 'firebase/firestore';
import { useRoute } from 'vue-router';

export const usePlaceStore = defineStore('PlaceStore', () => {
    const route = useRoute();
    const placeName = route.params.placeName;
    const db = useFirestore();

    const placeInfo = useDocument(() => doc(db, 'places', placeName), { once: true });

    return { placeInfo };
});

And inside the script setup of my component I have this:

<template>
    <div class="place" v-if="placeStore.placeInfo">
        <h1>{{ placeStore.placeInfo.placeName }}</h1>
    </div>
</template>

<script setup>
import { usePlaceStore } from '@/stores/PlaceStore';

const placeStore = usePlaceStore();
const favicon = document.querySelector("link[rel~='icon']");

document.title = placeStore.placeInfo.placeTitle;
favicon.href = placeStore.placeInfo.placeFaviconUrl;
</script>

I’m aware that the problem is that the variables get assigned before the data is retrieved from Firestore, so my question is what’s the right way to wait for data to load before assigning the value to the variables.