想让span中读取remaining的值，但是一直显示未定义，但是我在计算属性中已经写了啊，就算不用计算属性直接声明在data中也报错，报错信息都一样，如下

vue.js:465 [Vue warn]: Property or method "remaining" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

• 这是js代码，method中不涉及此问题

	new Vue({
		el: "#todo",
		data: {
		  newTodoText:'',
		  newtodos:[],
		  outtodos:[]
		},
		computed: {
		  remaining: function (){
			return this.newtodos.length;
		  }
  	},

html代码

	<div id="todo">
      <input type="text" name="name" placeholder="add what you want to do" v-model="newTodoText" v-on:keyup.enter="addTodo">
      <ul>
        <li
          v-for="(todo,index) in outtodos"
          v-bind:class="{ed: todo.status}"
          class="ing"
          >
            <input type="checkbox" :checked="todo.status" v-on:click="Completed(index)">
            <label>{{todo.title}}</label>
            <button v-on:click="removeTodo(index)">x</button>
        </li>
      </ul>
      <div>
        <span>{{remaining}}</span>
        <input type="button" value="All" v-on:click="getAll()">
        <input type="button" value="Active" v-on:click="getActive">
        <input type="button" value="Completed" v-on:click="getCompleted">
        <input type="button" value="Clear" v-on:click="cleartodos">
      </div>
    </div>