Vue.js storeにデータを保存していないのに表示されてしまう

Question

前提・実現したいこと

Vue.jsでアプリケーションを作っていています。
問題としてはEditページにて、フォームに入力したデータをstoreに保存しなくてもデータが反映されてしまいます。（ページ遷移をして再び同じリンクに行った時）
リロードすれば保存していないデータは消えます。
実現したいことはページ遷移をするとstoreに保存していないデータは表示されないようにしたいです。（保存した時のみデータを表示されるようにしたい）

発生している問題・エラーメッセージ

エラー原因はmounted()の場所だと思います。
他の場所やコンポーネントをコメントアウトして試しました。
mountedでstoreにあるデータをとってきています。
storeからデータを持ってきてv-modelをstoreに直結させないやり方でやっている(udemy書いていたコードをそのまま使っている)が、現状storeと直結してしまっている。udemyの方では直結していないです。
stateではなくgettersでデータを持ってくるやり方も試しましたが変わりませんでした。

エラーメッセージ

該当のソースコード

<template>
  <div>
    <h1>編集ページ</h1>
    <!-- リロードしないと入力したデータが保存しなくても消えない -->
     <div class="flex">
      <p class="input input__title">項目</p>
      <p class="input input__title">料金</p>
      <p class="input input__title">メモ</p>
    </div>

   <Add v-for="(list, index) in itemBody.item" :key="index" :n="list" :items="itemBody" @emit="toggle"></Add>

      <p v-if="showChild">合計{{sum()}}</p>
      <button @click="add">項目を追加</button>
    
    <button class="btn" @click="save">保存する</button>

  </div>

  
</template>

<script>
import Add from '../components//Add.vue'
export default{
  name: "edit",
   components:{
   Add
  },
     data(){
      return{
        number:0,
        itemBody:{
          total:0,
          item:[]
        },
         showChild: true,
         preItem:{
           total:0,
           item:[]
         }
      }
    },
    mounted: function() {
      let id = this.$route.params["id"];
      let item = this.$store.state.items.slice().find(item => item.id == id);

      this.itemBody = item.body;
      
      console.log(item.body)
    },
    

  methods:{
    save:function(){
      // this.itemBody.item = this.preItem.item
      this.itemBody.total = this.sum()
      this.$store.commit("update", {
        id:this.$route.params["id"],
        body:this.itemBody
        })
     this.$router.back()
    },
    add(){
        let item = this.itemBody["item"]
        // let item = this.preItem["item"]
        item.push({title:"",price:"",memo:""})
        },
      toggle() {
      this.showChild = false;
      this.$nextTick(() => (this.showChild = true));
    },
      sum(){
     let total = 0;
     
       let last =this.itemBody.item.length;
        for (let n = 0; n < last; n++) {
          let price = this.itemBody.item[n].price
        if(price){
          total +=price
        }
        }
          console.log(this.$store.state.items)
       return total
  

      }
      
  },
}
</script>

<style scoped>
.flex{
  display: flex;
}
.input{
  width: 200px;
  
}
.input__title{
  text-align: center;
}
.input__content{
  height: 40px;
}

.btn{
  margin-top: 30px;
}
</style>

<template>
     <div class="flex">

                 <input type="text" class="input input__content" v-model="n.title">
      <input type="number" class="input input__content" v-model.number="n.price">
      <textarea class="input input__content" v-model="n.memo"></textarea>
           <button @click="sum_emit(); delete_item(n)">項目を削除</button>
          
    </div>
</template>

<script>
  export default{
     data(){
      return{
      }
    },
    props:[
      "items",
       "n",
      ],
   methods:{
       delete_item(n){
        let num = this.items.item.indexOf(n)
         this.items.item.splice(num, 1);
         this.delete;
      },
      sum_emit(){
        this.$emit('emit')
      }
   

   }

  }
</script>

import Vue from 'vue';
import Vuex from 'vuex';
import createdPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
  plugins:[createdPersistedState()],
  state:{
    items:[
      { id:0, body:{total:0,}}
    ],
    month:[
      {id:1, body:{ item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:2, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:3, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:4, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:5, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:6, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:7, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:8, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:9, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:10, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0}},
      {id:11, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }},
      {id:12, body:{item:[
        {title:"",price:"",memo:""}
      ], total:0 }}
    ]
  },
  getters:{
    items(state){
      return state.items
    }
  },
  mutations:{
    save(state,item){
      state.items.push(item);
    },
    update(state,data){
      let x = state.items.find(item=> item.id == data.id);
      x.body =  data.body
    },
    month_save(state,m){
      state.month[0].body = m.body
    },
    month_save2(state,m){
      state.month[1].body = m.body
    },
    month_save3(state,m){
      state.month[2].body = m.body
    },
    month_save4(state,m){
      state.month[3].body = m.body
    },
    month_save5(state,m){
      state.month[4].body = m.body
    },
    month_save6(state,m){
      state.month[5].body = m.body
    },
    month_save7(state,m){
      state.month[6].body = m.body
    },
    month_save8(state,m){
      state.month[7].body = m.body
    },
    month_save9(state,m){
      state.month[8].body = m.body
    },
    month_save10(state,m){
      state.month[9].body = m.body
    },
    month_save11(state,m){
      state.month[10].body = m.body
    },
    month_save12(state,m){
      state.month[11].body = m.body
    },
  }
 
})

試したこと

console.logでstoreの状態をその都度確認した。すると保存していないデータがstoreの中に追加されています。リロードしたら消えます。

補足情報

Vue.jsのvertionは2です。