Struggling to get the data from useDocument to display with vue.js and Firestore

I'm trying to get a single record from Firestore to display in Vue.js. I'm using VueFire and the guide here.

<script setup>    
import { initializeApp } from 'firebase/app'
import { getFirestore , doc } from "firebase/firestore"; 
import { useDocument } from 'vuefire'

const firebaseConfig = {...};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
const db = getFirestore(firebaseApp);

const place  = useDocument(doc(db, "data", "key"));
console.log(place)
</script>

<template>
  
</template>

The data logged is RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue : {title: 'I am a title', however when it gets to the template there is an error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Jk789W3