Jsonデータの参照ができない

Question

Rails apiとNuxtで開発をしています。
axiosを使用して、DBからとってきた値をNuxtのPageで取得してv-forでその値を子コンポーネントに渡しています。
その子コンポーネントで取得したすべては表示できるのに、一つ一つが取得できません。
以下のソースコードで「Cannot read property 'id' of undefined」というエラーが出力されます。
ちなみに、{{content}}で出力した場合はjson形式の配列が表示されます。

<template>
  <div>
     <newproduct  :key="index" v-for="(content,index) in contents" :content=content />
  </div>
</template>
<script>
import newproduct from '~/components/main/newproduct.vue'
import axios from "@/plugins/axios"

export default {
  components: {
    newproduct,
  },
  data:function(){
  	return{
          contents:[],
  	}
  },
  beforeMount(){
    
        axios.get('v1/contents')
        .then(response => {
              this.contents = response.data;
        })
        .catch(error => {
              console.log(error);
        });
    }
}
</script>

<template>
    <div class="newproduct">
        {{content.id}}
    </div>
</template>
<script>
    
export default {
    props:{content:Array}
}
</script>

以下試したこと
・子コンポーネントでJson.parseを行い文字列に変換する。
→「Unexpected token u in JSON at position 0」が表示される

・content['id']のような書き方にしてみる
→同じ結果になる

・getで試してみる
→getわからないといわれる

よろしくお願いします

Comments

[hoshi-takanori]

Nuxt はわかりませんが、JavaScript 的には Cannot read property 'id' of undefined ってのは、content.id の content が undefined（値なし）なのでその id は取得できないってことですが、content にはどのような値が入ってますか？