Unable to open Dialog without using Transition

[wonder95]

According to the docs, I should be able to open and close my Dialog with just a prop. However, when I try it with my Dialog in a separate Vue component and passing in a value to the open prop like so

<script setup>
    import {Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot} from '@headlessui/vue';

    const props = defineProps({
        open: {
            type: Boolean,
            default: false,
        },
    })
</script>

<template>
    <Dialog :open="open">
        <DialogPanel>
            <DialogTitle>MyTitle</DialogTitle>
            <p>yada yada yada</p>
        </DialogPanel>
    </Dialog>
</template>

and from the triggering component

    <DuesPolicyModal
        :open="showPolicyModel"
    ></DuesPolicyModal>

it does not work. I have verified in my vue dev tools that showPolicyModel is set to true.

However, if I use a transition like so

<template>
    <TransitionRoot appear :show="open" as="template">
        <Dialog as="div" class="relative z-10">
            <TransitionChild
                as="template"
                enter="duration-300 ease-out"
                enter-from="opacity-0"
                enter-to="opacity-100"
                leave="duration-200 ease-in"
                leave-from="opacity-100"
                leave-to="opacity-0"
            >
                <div class="fixed inset-0 bg-black/25"/>
            </TransitionChild>

            <div class="fixed inset-0 overflow-y-auto">
                <div class="flex min-h-full items-center justify-center p-4 text-center">
                    <TransitionChild
                        as="template"
                        enter="duration-300 ease-out"
                        enter-from="opacity-0 scale-95"
                        enter-to="opacity-100 scale-100"
                        leave="duration-200 ease-in"
                        leave-from="opacity-100 scale-100"
                        leave-to="opacity-0 scale-95"
                    >
                        <DialogPanel
                            class="w-full max-w-md transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
                        >
                            <DialogTitle
                                as="h3"
                                class="text-lg font-bold leading-6 text-gray-900"
                            >
                                My Title
                            </DialogTitle>
                            <p>yada yada yada.</p>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

Why is that? The docs say it should work without a transition.