我试着用博客文章做卡片。我做了一个组件后，并将其插入到代码中。但它的工作原理如图所示。并显示。如何将文本插入卡片？现在所有的文本都在属性中。我刚开始学习vue和nuxt，所有的例子都不适合。

[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.

<template>
    <div class="post"><div><b>{{ title }}</b></div><div><small><i>{{ date }}</i></small></div><div>{{ text }}</div></div>
</template>

export default Vue.component('Post', {
    props: {
        id: number,
        date: Date,
        title: string,
        text: string
    }
});

<script setup lang="ts">
import Post from '~/components/Post.vue';

let posts = [
        {
            id: 1,
            date: new Date(),
            title: 'Title1',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 2,
            date: new Date(),
            title: 'Title2',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 3,
            date: new Date(),
            title: 'Title3',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 4,
            date: new Date(),
            title: 'Title4',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 5,
            date: new Date(),
            title: 'Title5',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
    ]

</script>

<template>
<div class="posts">
    
</div>
<Post  
        v-for="post in posts"
        :key="post.id"
        :title="post.title"
        :date="post.date"
        :text="post.text"
    ></Post>
</template>

我在组件中尝试了不同形式的脚本，但都不起作用。