From the docs, I like this way under the "Extending" section. I created AppHead component in a Layout directory along with the Layout component.

Layout/AppHead.vue

<template>
    <Head>
        <title>{{ title ? `Demo App - ${title}` : 'Demo App' }}</title>
        <slot/>
    </Head>
</template>

<script setup>
import {Head} from "@inertiajs/inertia-vue3";

defineProps({
    title: {
        type: String,
        required: false,
    }
});
</script>

Then use it like this

Pages/Home.vue

<template>
    <AppHead title="Home">
        <meta head-key="description" name="description" content="This be the home page">
    </AppHead>
    <h1 class="text-3xl">
        Hello, Foo
    </h1>
</template>

<script setup>
import AppHead from '@/Layout/AppHead';
</script>

And completely remove the title property from app.js. An added benefit is getting rid of annoying PHPStorm warnings.

unused title warning in app.js (gone)
missing required title inside Head tags if using the "<Head title='foo' />" syntax (gone)

Also had another warning in app.js about ignored promise returned from createInertiaApp. I fixed it by adding a then() to the end and initiate the progress thing inside there. This is on Laravel 9 using vite

app.js

createInertiaApp({
    resolve: async (name) => {
        let page = await resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        );

        page.default.layout ??= Layout;

        return page;
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .component('Link', Link)
            .mount(el)
    },
}).then(() => {
    InertiaProgress.init({
        color: 'blue',
        showSpinner: true,
    });
});

Dynamic Title and Meta Tags