为啥页面不显示注册的组件

<div class="todolist" id="app">

<div class="form">

<input type="text" v-model="inputVal" >

<input type="submit" value="提交" @click="tj">

</div>

<ul>

<!-- <li v-for="(item , index) in list" :key="list.id" @click="click_tab">{{item.content}}</li> -->

<todoItem></todoItem>

</ul>

</div>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">

Vue.component('todoItem', {

 template:'<li>item</li>'

})

new Vue({

el: '#app',

data: {

inputVal : '',

list:[]

},

methods:{

tj:function(){

this.list.unshift({

id:this.id++,

content:this.inputVal.trim()

});

this.inputVal = ""

},

}

})

</script>