Property or method "index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )

現象

Vuejs 2.X環境でチュートリアルをしていたところ、ToDoアプリケーションのところで以下のwarningが表示された。

main.js:20715 [Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )

解決

2.xだと、以下の通り修正しないといけないみたい

            <li v-for="todo in todos">
                <span>{{ todo.text }}</span>
                <button v-on:click="removeTodo(index)">X</button>
            </li>

を

            <li v-for="(todo, index) in todos">
                <span>{{ todo.text }}</span>
                <button v-on:click="removeTodo(index)">X</button>
            </li>

warningは消えました