Текст vue 3 ts не отображается

Я создаю клон веб-приложения Trello. У меня проблема с тем, что текст не отображается.

EventCard code:<template>
    <div class="bg-white rounded-md shadow-md">
        <div class="px-4 py-2 mt-2">
            <h2 class="text-lg font-medium text-gray-600" v-bind:title="title">{{ title }}</h2>
            <p class="text-gray-600" v-bind:description="description">{{ description }}</p>
        </div>
        <div v-if="showForm">
            <EventForm v-model:title="title" v-model:description="description" @add-event="addEvent" />
        </div>
        <div class="flex justify-between items-center px-4 py-2 bg-gray-100 rounded-b-md">
            <button class="text-blue-600 hover:text-blue-800" @click="editEvent">Edit</button>
            <button class="text-red-600 hover:text-red-800" @click="$emit('delete', form)">Delete</button>
            <button class="text-green-600 hover:text-green-800" @click="showForm = true">Add Event</button>
        </div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, ref } from 'vue';
import EventForm from './EventForm.vue';

export default defineComponent({
    name: 'EventCard',
    components: {
        EventForm,
    },
    props: {
        event: {
            type: Object,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        description: {
            type: String,
            required: true,
        },
        loadedEvent: {
            type: Object,
            default: () => ({}),
        },
    },

    setup(props, { emit }) {
        const form = ref({ title: '', description: '' });
        const showForm = ref(false);

        const fetchEventData = () => {
            form.value.title = props.event.title;
            form.value.description = props.event.description;
        };

        const editEvent = () => {
            showForm.value = true;
        };

        const addEvent = (event) => {
            emit('add-event', event);
            showForm.value = false;
        };

        fetchEventData();

        return {
            form,
            showForm,
            editEvent,
            addEvent,
        };
    },
});
</script>
  EventForm code: <template>
    <form @submit.prevent="handleSubmit">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-gray-700 font-medium mb-2">Title</label>
                <input
                    class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                    type="text" v-model="form.title" />
            </div>
            <div>
                <label class="block text-gray-700 font-medium mb-2">Date</label>
                <input
                    class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                    type="datetime-local" v-model="form.date" />
            </div>
            <div>
                <label class="block text-gray-700 font-medium mb-2">Description</label>
                <textarea
                    class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                    rows="4" v-model="form.description"></textarea>
            </div>
            <div class="col-span-2">
                <div class="flex justify-end">
                    <button
                        class="px-4 py-2 rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:bg-blue-700"
                        type="submit">
                        Save
                    </button>
                </div>
            </div>
        </div>
    </form>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

interface EventForm {
    title: string;
    date: string;
    description: string;
}

export default defineComponent({
    name: 'EventForm',

    props: {
        title: {
            type: String,
            required: true,
        },
        description: {
            type: String,
            required: true,
        },
    },

    setup(props, { emit }) {
        const form = ref<EventForm>({
            title: props.title,
            date: '',
            description: props.description,
        });

        const handleSubmit = () => {
            console.log('Form submitted with data: ', form.value);
            emit('add-event', form.value);
            form.value.title = '';
            form.value.date = '';
            form.value.description = '';
        };

        return {
            form,
            handleSubmit,
        };
    },
});
</script>
ScheduleViews code: <template>
    <div class="min-h-screen bg-gray-100">
        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <div class="px-4 py-6 sm:px-0">
                <h1 class="text-2xl font-semibold">Scheduler</h1>
                <div class="grid grid-cols-1  sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-10">
                    <EventCard v-for="(event, index) in events" :key="index" :event="event" :title="eventTitle"
                        :description="eventDescription" @edit="editEvent" @delete="deleteEvent" class="text-2xl p7-5"/>
                </div>
                <div class="mt-6">
                    <EventForm @submit="addEvent" :title="eventTitle" :description="eventDescription" />
                </div>
            </div>
        </main>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import EventCard from './EventCard.vue';
import EventForm from './EventForm.vue';
import io from 'socket.io-client';

/**Это создает подключение WebSocket к серверу с использованием Socket.IO */
const socket = io('http://localhost:5173');

export default defineComponent({
    name: 'App',
    components: {
        EventCard,
        EventForm,
    },

    setup() {
        const events = reactive<any[]>([]);
        let eventTitle = reactive<any>('');
        let eventDescription = reactive<any>('');

        /**
    * Функция, добавляющая новое событие в список событий
    */
        const addEvent = (newEvent: any) => {
            eventTitle = newEvent.title;
            eventDescription = newEvent.description;

            events.push(newEvent);
        };


        /**
         * Функция, обновляющая информацию о событии в списке событий
         */
        const editEvent = (updatedEvent: any) => {
            const index = events.findIndex((event) => event.id === updatedEvent.id);
            events.splice(index, 1, updatedEvent);
        };

        /**
         * Функция, удаляющая событие из списка событий
         */
        const deleteEvent = (deletedEvent: any) => {
            const index = events.findIndex((event) => event.id === deletedEvent.id);
            events.splice(index, 1);
        };

        onMounted(() => {
            socket.on('new-event', (event: any) => {
                addEvent(event);
            });
        });
        return {
            events,
            eventTitle,
            eventDescription,
            addEvent,
            editEvent,
            deleteEvent,
        };
    },
});
</script>

Вот как это выглядит