为什么在子类当中循环之后不能传递给他的父类

在这段代码当中为什么在将my-nav当中的ul li的值传递给他的父组件my-header的时候会报错
<div id="app">
    <my-header :list = "list"></my-header>
</div>
<script type="text/javascript" src="js/vue.js"></script>
     <script>
          var vue = new Vue({
              el : "#app",
              data: {
                   list:['第一项111','第二项222','第三项']
              } ,
              components: {
                  "my-header": {
                      template: "<div>" +
                      "<ul>" +
                      "<li v-for='item in list'>{{item}}</li>" +
                      "</ul>" +
                       "<my-nav :list='list'></my-nav>"+
                      "</div>",
                      props: ['list']
                  },
                  components: {
                      "my-nav":{
                          template:
                          "<ul>" +
                          "<li v-for='item in list'>{{item}}</li>" +
                          "</ul>",
                          props:["list"]
                      }
                  }              }
          })
     </script>