Nuxt.jsにて、Jsonの情報を受け渡す方法を教えてください。

現在勉強として、WEBサイトをNuxt.jsを用いて作成しています。

そこで、メンバー情報をJsonから取得し、それをメンバー一覧に表示させようと思っているのですが、エラーが出てしまっているので、解決方法を教えていただけると助かります。

Members.json
→メンバー情報を入れてあるjsonです。

[
    {
      "memberId": 1,
      "thumbnail": "members/h-muramatsu.png",
      "role": "プロデューサー",
      "name": “hogehoge”,
      "profile": "プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。"
    },
]

MemberItem.vue
→ メンバー一覧に表示させるためのメンバーカードです。

<template>
    <div class="member-item">
        <img class="member-item__thumbnail" :src="loadImg(member.thumbnail)" alt />
        <div class="member-item__role">{{ member.role }}</div>
        <div class="member-item__name">{{ member.name }}</div>
    </div>
</template>

<script>
export default {
  name: "MemberItem",
  props: "member", 
  methods: {
    loadImg(fileName) {
      return require(`~/assets/${fileName}`);
    }
  }
};
</script>

about.vue
→ メンバー一覧を表示させるaboutページです。

<template>
<div class="about__member">
      <h1 class="about__title">MEMBER</h1>
      <div class="about__member-list">
        <MemberItem 
        :member="member"
        v-for="member in members"
        :key="member.memberId"
        />
      </div>
    </div>
</template>

<script>
import members from '~/assets/json/members.json';
import MemberItem from "@/components/MemberItem.vue";
export default {
  components: {
    MemberItem
  },
  data(){
    return {
      members: members
    }
  }
};
</script>

上記スクリプトでABOUTページを開くと、
「Cannot read property 'thumbnail' of undefined」（components/MemberItem.vue）
と表示されてしまいます。

いろいろ試してみたのですが、MemberItem.vueにJsonの情報を渡して、メンバー一覧をABOUTページに表示させるにはどうすればいいいでしょうか、ご教授いただけると助かります。