Vue.js watcher not watching v-model changes - vue.js

Question

I am having a problem with vue.js.
I have it so when you add a new item it saves to local storage but i also want it to save to local storage when you edit the item on the input. I feel like it should be working because of the v-model but it doesn't.
<template>
<div class="hello">
<h1>TODO</h1>
<input type="text" name="" value="" placeholder="E.g do homework..." v-model="input">
<br>
<input type="submit" name="button" #click="add()">
<p></p>
<div class="" v-for="(item, i) in todo" v-bind:key="i">
<input type="text" v-model="item.content" />
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
todo: [
{content:"welcome", done: false}
],
input: "",
}
},
methods: {
add(){
if (this.input.trim() === '' || this.input === null){
return
}else{
this.todo.push({
content: this.input,
done: false,
})
this.input = ""
}
}
},
watch:{
todo(newVal) {
localStorage.setItem("todo",JSON.stringify(newVal))
console.log(localStorage.getItem('todo'))
},
deep: true
},
mounted(){
this.todo = JSON.parse(localStorage.getItem('todo')) || []
}
}
</script>
I can't see why this doesn't work and I have tried going through the vue.js documentation and haven't found anything about this.
Any help is appreciated.
Thanks.

Answer 1

This is expected because when you are editing item.content from input you are mutating the object (and the array) and not replacing it. Vue watchers can't observe mutations. As explained here
You should probably create a new method and use javascript methods that returns a copy of your array and does not mutates/changes. More on here.