Vue.jsのコンポーネントでv-forを使用した時にうまく稼働しない

Question

Vue.jsを勉強中です。
初歩的な質問で恐縮ですが、簡単なコードなのにうまく稼働せず、わかる方に教えていただければ幸いです。

以下のコードを実行しようとすると、"fr"が定義されていない、とwarningが出てしまいます。

<script src="https://unpkg.com/vue"></script>

<div id='fruits-component'>
  <ul>
    <fruits-list v-for="fr in fruits" :fruits="fruits" :key="fr.id"></fruits-list>
  </ul>
</div>

<script>
Vue.component('fruits-list',{
  props:['fruits'],
  template:'<li>{{fr.name}}</li>'
});

new Vue({
  el:'#fruits-component',
  data:{
    fruits:[
      {id:1,name:'みかん'},
      {id:2,name:'りんご'}
    ],
  }
});
</script>

▼warnメッセージは以下

[Vue warn]: Property or method "fr" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in <FruitsList>)

仕組みが理解できていないのか、この内容で稼働しない理由がよくわかっておりません。お分かりの方がいらっしゃれば、ご教示頂けますと幸いです。

Answer 1

自己解決しました。

<div id='fruits-component'>
  <ul>
    <frtpl v-for="fr in fruits" :fr="fr" :key="fr.id"></frtpl>
  </ul>
</div>

<script>
Vue.component('frtpl',{
  props:['fr'],
  template:'<li>{{fr.name}}</li>'
});

var vm = new Vue({
  el:'#fruits-component',
  data:function(){
    return {fruits:[
      {id:1,name:'みかん'},
      {id:2,name:'りんご'}
    ]}
  },

propsで渡す要素は、v-forで回す場合、"fruits"ではなく"fr"の方だったようです。