为什么先定义new Vue再声明todo-item组件会失效

new Vue({

el: '#root',

data: {

inputValue : '2',

list: []

},

methods: {

handleSubmit: function(){

this.list.push(this.inputValue);

this.inputValue = ''

}

}

})

Vue.component('todo-item', {

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

})

el: '#root',

data: {

inputValue : '2',

list: []

},

methods: {

handleSubmit: function(){

this.list.push(this.inputValue);

this.inputValue = ''

}

}

});