El problema aquí es que cada vez que se carga la página y llama a getItem() , restablece localStorage.count = 0, ya que se inicializa automáticamente a 0.

En su lugar, haz algo como esto:

 const app = Vue.createApp({ data() { return { counter: localStorage.getItem('count') || 0, }; }, watch: { counter() { localStorage.setItem('count', this.counter); } }, methods: { getItem() { return localStorage.getItem('count'); }, }, }).mount('#app');

De esta manera, está configurando el valor inicial al valor del almacenamiento; y observando ese valor para un cambio y luego actualizando localStorage para reflejar el valor correcto almacenado en la ventana.

Esta solución debería funcionar para usted:

Aquí hay una versión mejorada:

En esta solución, utilicé un operador ternario que primero pregunta si la propiedad del contador existe en el almacenamiento local; de lo contrario, el contador se inicializará con el valor 0, si el contador está allí, obtendrá el valor y analizará ese valor en valor int como todo el valor en la tienda local se guarda como cadena.

Entonces, si suma el valor, una cadena hará lo siguiente:

paso: 1

 counter = '0';

paso: 2

 counter++

en este paso, el contador analizará a un entero pero seguirá siendo 0;

En cambio, si haces lo que codifico

paso: 1

 counter = parseInt('0');

paso: 2

counter++ , el contador la primera vez será 1

Como este código es para la versión 3 de vuejs, el fragmento no funcionará

 const app = Vue.createApp({ data() { return { counter: localStorage.getItem('count') ? parseInt(localStorage.getItem('count')) : 0, }; }, watch: { counter(newQuestion, oldQuestion){ localStorage.setItem('count', newQuestion) } }, }).mount('#app');

 <div id="app"> <h2>{{counter}}</h2> <button @click="counter--">-</button> <button @click="counter++">+</button> </div>

Usar propiedades calculadas. Así que no necesitas métodos, observadores o datos

 const app = Vue.createApp({ computed: { counter: { get() { return localStorage.getItem('count') || 0 }, set(val) { localStorage.setItem("count", val) } } }, }).mount('#app');