Simple persistant state in you Vue app

usePersist.js

export const get = (name = '') => {
  const storage = localStorage.getItem(name)
  const resp = JSON.parse(storage)
  return Array.isArray(resp) ? resp : []
}

export const save = (name = '', obj) => {
  localStorage.setItem(name, JSON.stringify(obj))
}

export const usePersist = (name = '') => {
  return [
    () => get(name),
    (obj) => save(name, obj)
  ]
}

zMultipleTodos.vue

<template>
 <div>
  <PersistTodo id="list1" />
  <PersistTodo id="list2" />
 </div>
</template>

zPersistTodo.vue

<script>
import { usePersist } from 'usePersist.js'

export default {
  props: {
    id: { type: String, default: Math.random().toString() }
  },
  
  data: (vm) => ({
    items: [
      { title: 'Item 1' }
    ]
  }),
  
  async mounted () {
    const [getItems, setItems] = usePersist(this.id)
    // Watch for changes
    this.$watch('items', setItems)
    // Init state
    this.items = getItems()
  },
  
  methods: {
    add () {
      this.items.push({ title: `Item ${this.items.length + 1}` })
    },
    onDelete (index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

<template>
  <div>
    List #{{ id }}

    <button @click="add">
      Add
    </button>

    <div
      v-for="(item, index) in items"
      :key="index"
    >
      <div>
        <b>{{ item.title }}</b>
        <button
          icon
          @click="onDelete(item,index)"
        >
          delete
        </button>
      </div>
    </div>

    <div v-if="!items.length">
      -- No items --
    </div>
  </div>
</template>