strange behavior when pointing to localStorage with vue getter/setter - vue.js

Question

I am getting strange behavior from this code. I want to use getter and setter to point to local storage.
The first time the app is rendered, the items are properly retrieved.
Afterwards, when adding a new item to the list, it is not rendered. Also, when adding an item, it will just swap the value at the index of the previous item, after adding the very first item.
<input type="text" v-model="term" #keyup.enter="submit()" />
<ul>
<li v-for="(item, i) in history" :key="i">{{item}}</li>
</ul>
const app = new Vue({
el: '#app',
data: {
term: '',
},
computed: {
history: {
get() {
return JSON.parse(localStorage.getItem('history')) || [];
},
set(value) {
localStorage.setItem('history', JSON.stringify(value));
},
},
},
methods: {
submit() {
this.history = [...this.history, this.term];
this.term = '';
},
},
});
You can check the code here because SO is not allowing to acces localStorage. Remember to refresh the page once you have added the first item and also to investigate what is happening inside the localStorage.
https://codepen.io/bluebrown/pen/dyMMRKj?editors=1010
This code is a port of some alpinejs project. And there it worked.
That said, I can make it work when I write it like below. However, I got curious now, why above example behaves like that.
const app = new Vue({
el: '#app',
data: {
term: '',
history: [],
},
created() {
this.history = JSON.parse(localStorage.getItem('history')) || [];
},
watch: {
history: {
deep: true,
handler(value) {
localStorage.setItem('history', JSON.stringify(value));
},
},
},
methods: {
submit() {
this.history = [...this.history, this.term];
this.term = '';
},
},
});

Answer 1

The reason why it didn't work is because Vue can only observe plain objects. Native objects like localStorage cannot be observed by Vue. If you put something into local storage, Vue won't know about it and your view will not automatically update to display those changes.
Vue mentions this limitation in the docs for the data object:
The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it "reactive". The object must be plain: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.
These limitations apply to Vue's entire reactivity system, including computed properties.