Jetstream/Inertia dialog modal won't close

Can open the jet dialog modal, but it will not close. What am I missing?

....
        <jet-dialog-modal :show="showItemsAddedToCart" @close="showItemsAddedToCart = false">

            <template #title>
                Product added
            </template>

            <template #content>
                {{this.$page.props.flash.message}}
            </template>

            <template #footer>
                <jet-button type="button" @click.native="showItemsAddedToCart = false">
                    Continue Shopping
                </jet-button>

                <jet-button type="button" class="ml-2" >
                    <inertia-link :href="route('cart')">Go to shopping cart</inertia-link>
                </jet-button>
            </template>

        </jet-dialog-modal>

    </div>

</template>

<script>
    import { useForm } from '@inertiajs/inertia-vue3'
    import JetButton from '@/Jetstream/Button'
    import JetInputError from '@/Jetstream/InputError'
    import JetDialogModal from '@/Jetstream/DialogModal'

    export default {
        props: [ 'product' ],
        setup (props) {
            const form = useForm({
                product_id: props.product.id,
                resource_id: props.product.resources[0] ? props.product.resources[0].id : null,
                queue_id: null,
                quantity: 1
            })
            return {
                form,
                showItemsAddedToCart: false
            }
        },
        methods: {
            submit() {
                this.form.post('/order_details', {
                   preserveScroll: true,
                   onSuccess: (response) => {
                       this.showItemsAddedToCart = true
                   }
  		        });
            }
        },
        components: {
            JetButton,
            JetInputError,
            JetDialogModal,
        }
    }
</script>