下拉不工作Vue.js

Question

我正在使用Vue 2，Nuxt和Tailwindcss来构建测试应用程序，但是，我似乎无法让我的道具工作。

在控制台中，我看到以下内容：

这是我的组件代码

<template>
  <section class="max-w-sm md:w-1/2 rounded overflow-hidden shadow">
    <section class="w-full bg-cover bg-center h-64" :style="{ backgroundImage: 'url(' + thumbnailImage + ')' }"></section>
    <section class="px-6 py-4">
      <section class="font-bold text-xl mb-2">{{ title }}</section>
      <p class="text-grey-darker text-base">
        {{ excerpt }}
      </p>
    </section>
    <section class="px-4 py-4 float-right">
      <nuxt-link :to="id">
        <span class="inline-block px-3 py-1 text-sm font-semibold text-grey-darker">View More
          <i class="fal fa-arrow-right ml-2"></i>
        </span>
      </nuxt-link>
    </section>
  </section>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    excerpt: {
      type: String,
      required: true
    },
    thumbnailImage: {
      type: String,
      required: true
    }
  }
}
</script>

这是我的索引代码拉入帖子

<template>
  <section class="container mt-8 mr-4 ml-4">
    <PostPreview
      v-for="post in posts"
      :key="post.id"
      :id="post.id"
      :thumbnailImage="post.thumbnailURL"
      :title="post.title"
      :excerpt="post.previewText" />
  </section>
</template>

<script>
import PostPreview from '@/components/Blog/PostPreview';

export default {
  components: {
    PostPreview
  },
  data() {
    return {
      posts: [{
        id: 'a-new-beginning',
        thumbnailURL: 'https://tailwindcss.com/img/card-top.jpg',
        title: 'A New Beginning',
        previewText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.'
      }]
    }
  }
}
</script>

我不确定我在这里做错了什么，代码正在编译，但我仍然遇到错误。

感谢您的任何帮助。