When to invoke localStorage

 mounted:function(){
    This.items=JSON.parse(localStorage.getItem('items'))||[];
  },

<divid="app">
    <ul v-for = "item in items" >
      <li>{{item.id}}</li>
    </ul>
    <p@click="addItem">
     Click to add
    </p>
 </div>

varvue=newVue({
    el: '#app',
  data: {
      items:
     {id:'a', text:'aaa'},
     {id:'b', text:'bbb'}
    ]
  },
  methods: {
    addItem: function(){
     let todo={id:'c', text:'cc'}
      This.items.push(todo)
    }
  },
  watch: {
    items: {
      handler:function(){
        localStorage.setItem('items', JSON.stringify(this.items));
      },
      deep —true
    }
  },
  mounted: function() {
    This.items=JSON.parse(localStorage.getItem('items'))|[];
  },
})