После обновления страницы массив очищается, как исправить?

const Json = [
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
}

value

addPlus(id) {
this.value = this.value + 1;
},

addMinus(id) { 
if (this.value > 0) {         
this.value = this.value - 1;    
}
},

import { ref } from "vue";
 
const useStoredData = function (variableName, defaultValue) {
  // пробуем достать из localstorage
  const saved = localStorage.getItem(variableName);
  // если есть, то парсим. и чтоб обеспечить структуру испольузем и объект по умолчанию
  // если нет, то по умолчанию
  const value = ref(
    saved ? { ...defaultValue, ...JSON.parse(saved) } : defaultValue
  );
  // функция сохранения в localStorage
  const save = (newValue) => {
    value.value = { ...value.value, ...newValue };
    localStorage.setItem(variableName, JSON.stringify(newValue));
  };
 
  return {
    value,
    save
  };
};
export default useStoredData;

<template>
  <input v-model="myObject.value.value.name" /><br />
  <input v-model="myObject.value.value.age" /><br />
  <button @click="save">Save</button>
  <pre>
    {{ myObject.value.value }}
  </pre>
</template>
 
<script setup>
import useStoredData from "./stotredData";
 
const myObject = useStoredData("myVariableName", { name: "ss", age: 10 });
 
const save = () => {
  myObject.save(myObject.value.value);
};
</script>