I have a component called “item” and it looks like:

<template>
    <div class="flex flex-row p-1" x-property="{{item.property}}" x-type="{{item.type}}" x-misc="{{item.misc}}">
        <span class="w-1/5">{{ item.property }}</span>
        <span class="w-1/5">{{ item.type }}</span>
        <span class="w-2/5">{{ item.misc }}</span>
        <div class="w-1/5 flex justify-end">
            <button type="button" class="relative rounded-fullt text-cyan-500 focus:outline-none ml-1">
                <PencilIcon class="h-6 w-6"></PencilIcon>
            </button>
            <button type="button" class="relative rounded-fullt text-cyan-500 focus:outline-none ml-1">
                <TrashIcon class="h-6 w-6"></TrashIcon>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { TrashIcon, PencilIcon } from "@heroicons/vue/24/outline";

    const props = defineProps<{
        item: typeof ModalResult
    }>();

    console.log(props);

</script>

It it being used like this

<component v-for="item in items"
           :is="item.type == 'object' ? ObjectItem : item.type == 'list' ? List : Item"
           :item="item"></component>

And it keeps giving me the error: item.vue:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'property')

I feel like I have tried everything, but it keeps giving me that error.