Нужна помощь: vuetify datatable localalstorage

Question

Мне нужна помощь для создания локального хранилища в таблице данных vuetify, которую я создал с помощью vuetify. Я новичок ie в vuetify / vue и хочу сохранить данные с помощью localalstorage. Существует много других сведений о localalstorage и vue / vuetify, но сейчас это слишком много для меня. Может быть, кто-нибудь может помочь мне сделать это локальное хранилище для этой таблицы данных.

Приложение. vue код:

 <template>
<v-app>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>Ablesewerte</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <v-row>                                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.ablesegeraet" placeholder="Eingabe erforderlich!" label="Ablesegerät"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.zaehlerstand" label="Zählerstand"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.datum" label="Datum"></v-text-field>
                    <template v-slot:item.createdOn="{ item }">
           <span>{{new Date(item.createdOn).toLocaleString()}}</span>
         </template>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
              <v-btn color="blue darken-1" text @click="save">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
  </v-app>
</template>
<script>
  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'Ablesegerät',
          align: 'start',
          sortable: false,
          value: 'ablesegeraet',
        },
        { text: 'Zählerstand', value: 'zaehlerstand' }, 
        { text: 'Datum', value: 'datum', dataType: "Date" },
      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        name: '',
        zaehlerstand: 0,
        datum: 0,
      },
      defaultItem: {
        name: '',
        zaehlerstand: 0,
        datum: 0,
      },
    }),

    mounted() {
    if (localStorage.name) {
      this.name = localStorage.editedItem.ablesegeraet;
    }
    if (localStorage.age) {
      this.age = localStorage.editedItem.zaehlerstand;
    }
    if (localStorage.age) {
      this.age = localStorage.editedItem.datum;
    }
  },

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },

    watch: {
      dialog (val) {
        val || this.close()
      },
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.desserts = [
          {
            ablesegeraet: 'Stromzaehler',
            zaehlerstand: 66662.9,
            datum:23,
            },
          {
            ablesegeraet: 'Stromzaehler',
            zaehlerstand: 67650.3,
            datum:23,
            },
        ]
      },

      editItem (item) {
        this.editedIndex = this.desserts.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        const index = this.desserts.indexOf(item)
        confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem)
        } else {
          this.desserts.push(this.editedItem)
        }
        this.close()
      },
    },
  }
</script>

Это очень сложный код, и я надеюсь, что вы можете помочь мне !