Trouble Setting Page Title with Unhead in Vue: Type Mismatch Warning

Question

I'm attempting to update the document title using Unhead in Vue, but I'm encountering a type mismatch warning in my IDE that I can't seem to resolve. According to the Unhead documentation for Vue, I set up the title using the following code:

import { ref } from 'vue';
const pageTitle = ref<string | undefined>(undefined);

useHead({
    title: () => pageTitle
});

However, this leads to the following warning::

Type '() => Ref<string | undefined>' is not assignable to type 'Title | Promise | undefined'. Type '() => Ref<string | undefined>' is not assignable to type '() => Title'.ts(2322)

To update the pageTitle ref when the pet (reactive object) changes, I've tried the following:

watch(() => pet.value?.name, () => {
    pageTitle.value = pet.value?.name;
});

Any suggestions on how to resolve this type mismatch issue or a different approach to setting the page title dynamically using Unhead in Vue?