Vuex - Do not mutate vuex store state outside mutation handlers

It could be a bit tricky to use v-model on a piece of state that belongs to Vuex.

and you have used v-model on todo.text here:

<input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">

use :value to read value and v-on:input or v-on:change to execute a method that perform the mutation inside an explicit Vuex mutation handler

This issue is handled here: https://vuex.vuejs.org/en/forms.html

Hello I have get the same problem and solve it with clone my object using one of the following:

{ ...obj} //spread syntax 
Object.assign({}, obj)
JSON.parse(JSON.stringify(obj))

For your code I think you need to replace this part

computed: {
  todos () {
    // console.log(this)
    return this.$store.state.todos.list
  }
}

With this

computed: {
  todos () {
    // console.log(this)
    return {...this.$store.state.todos.list}
  }
}

I don't make sure if this is the best way but hope this helpful for other people that have the same issue.