I'm trying to save and read multiple json objects from my vue-application with the vue-cookie package (Version 1.1.4). The snippet below runs really well and the json object is saved and retrivied as expected.

However, I noticed as soon as the data is retrieved via cookies and i want to change data inside the object on the web page, the "updated" lifecycle method will not trigger. This behaviour is really awkward as I am only adding the cookieToJson() method to the beforMount() method. The Vue debugger also shows that the value is changed. I think the data is not reactive anymore, but how can I fix this.

data () {
   return {
      json: {
         a: 0,
         b: 1,
      },
   }
},
methods: {
   jsonToCookie(name) {
      const data = "{\"" + name + "\": " + JSON.stringify(this[name])+"}";
      this.$cookie.set(name, data, { expires: '1M' }, '/app');
   },
   cookieToJson(name) {
     const data = JSON.parse(this.$cookie.get(name));
     if(data==null) return
     for(var i = 0; i < Object.keys(data).length; i++) {
       var name = Object.keys(data)[i]
       this[name] = data[name];
     }
   },
   beforeMount() {
     console.log("beforeMount")
     this.cookieToJson("json")
   },
   updated() {
     console.log("updated")
     this.jsonToCookie("json")
   },
}