[Vue.js][Resolved] invalid v-for alias "nav-item" in expression: v-for="nav-item in navList"

Error message

[Vue warn]: Error compiling template:
<div id="wrapper">
        <ol><app-nav v-for="nav-item in navList" v-bind:nav="nav-item" v-bind:key="nav-item.id"></app-nav></ol>
        <div id="view">

         </div>
    </div>
- invalid v-for alias "nav-item" in expression: v-for="nav-item in navList"
(found in <Root>)

Source Code

html part

    <div id="wrapper">
        <ol><app-nav
                v-for="nav-item in navList"
                v-bind:nav="nav-item"
                v-bind:key="nav-item.id"
                ></app-nav></ol>
    </div>

Javascript part

    Vue.component('app-nav',{
        props:["nav"],
        template:'<li><a :href="nav.url">{{nav.text}}</a></li>'
    });

    var app =  new Vue({
      el: '#wrapper',
      data: {
        navList: [
          { id:0,text:'Vegetables',url:"sfgdg"},
          { id:1,text:'Cheese',url:"sfgdg"},
          { id:2,text:'Whatever',url:"sfgdg"}
        ],
      }
    });

What's the problem ?

Problem is in html part, it require camelCased

    <div id="wrapper">
        <ol><app-nav
                v-for="navItem in navList"
                v-bind:nav="navItem"
                v-bind:key="navItem.id"
                ></app-nav></ol>
    </div>

Reference:
https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case