这个全局组件没有效果，求大神指导

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title> todoList编写</title>
   <script src='./vue.js'></script>
</head>
<body>
   <div id="toDo">
       <div>
           <input v-model="inPutValue" >
           <button @click="handelSubmit">提交</button>
       </div>

       <ul>
           
           <todo-item> </todo-item>
       </ul>
   </div>

   <script type="text/javascript">

       //定义组件    这是全局组件，template里是模板，相当于定义一个标签
       Vue.component('todo-item',{
           template:'<li>{{item}}</li>'
       })

       new Vue({
           el:'#toDo',
           data:{
               inPutValue:'please Write Here',
               list:[]
           },
           methods:{
               handelSubmit:function(){
                   this.list.push(this.inPutValue),
                   this.inPutValue=''
               }
           }
       });
   </script>
</body>
</html>