１．JSONにミスがあると上手く表示されないため、以下のような調節チェックツールでJSONファイル
　　のチェックを行ってください。

　　　https://tools.m-bsys.com/development_tooles/json-beautifier.php

２．axiosをインストールしてください
　　　axiosのインストールはこちら

ファイル構造

├── static
│　　　　　　└── data
│　　　　　　　　　　└── member.json （JSONファイル）
├── pages
│　　　　　　└── index.vue （表示させたいファイル）

member.json

{
  "members": [
    {
      "name": "佐藤さん",
      "hobby": [
        "釣り",
        "ゲーム",
        "アニメ"
      ]
    },
    {
      "name": "山田さん",
      "hobby": [
        "サッカー",
        "ドライブ"
      ]
    }
  ]
}

index.vue

<script>
export default {
  async asyncData({ $axios }) {
    const res = await $axios.$get('/data/member.json');
    return {
      members: res.members
    }
  }
}
</script>

あとは表示させたいところに表示させるだけです。
今回は配列も作成したため、配列の箇所はv-forを使用していきます。

index.vue

<section v-for="member in members" :key="member.id">
	<h2>{{ member.name }}</h2>
	<ul>
		<li v-for="hobby in member.hobby" :key="hobby.item">{{ hobby }}</li>
	</ul>
</section>

関連記事:

Nuxt.js、Vue.jsによるToDoのサンプル マークダウンを表示するサンプル ダッシュボード(ADMIN) Nuxt.js テクニック Nuxt.js -jsonからEXCELファイル作成  Nuxt.js(Vue.js)の「v-for」でコンポーネントをループさせる方法 v-forを指定回数でループさせ、なおかつ配列へアクセスする(Nuxt.js/Vue.js) Nuxt.js初心者がハンバーガーメニューを実装しながらv-onとかv-ifを学ぶ Nuxt-HEADタグ操作 Nuxt.js Excelファイルを読み込む Vue3でTypeScript実践 ECサイト構築例 Nuxt.js + Vue.js LP構築例 Nuxt.js + Vue.js