Update cookies on watch Vue.js

Question

I am currently implementing the cookies. I have the cookies to be set on mounted, and this cookie has an empty object initially. As soon as the object gets filled, I am watching the object getting updated, and here is where I want to update my cookie, however, it does not get updated on watch. I will put a draft just below.

   <template>
         <details @detailsCompleted="savedDetails"></details>
    </template>


      data() {
         return {
               obj:{}
         }
            },

    methods: {
    savedDetails: function(objectPassed) {
    this.obj = objectPassed;
    }
    }
     mounted: function() {
           this.obj = {};
            Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
            Cookies.get("name");

        }

        watch: {
        obj: {
        handler: function(val){
        Cookies.set("name", JSON.stringify(val), {expires: '1m'});
         Cookies.get("name");

        }
    }

I can see that the cookies get initialised, and has empty obj, however, does not get updated on watch, how can I achieve this?? Thanks

Answer 1

Simply update the cookie along with the saveDetails method like this

<template>
   <details @detailsCompleted="savedDetails"></details>
 </template>

 data() {
   return {
     obj:{}
    }
  },
  methods: {
    savedDetails: function(objectPassed) {
      this.obj = objectPassed;
      Cookies.set("name", JSON.stringify(objectPassed), {expires: '1m'});
      Cookies.get("name");
    }
  },
  mounted: function() {
    this.obj = {};
    Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
    Cookies.get("name");
  }

EDIT:

https://jsfiddle.net/k85o7bdq/

Here's a working fiddle.

Perhaps You're trying to determine if cookie was updated by looking at the Application tab in dev tools? There's a little refresh button there, try clicking it after updating the cookies.

Answer 2

Your obj inside the mounted hook is locally scoped. If you don't declare it inside your component's data function or as a computed property, the watcher doesn't see it because it is not reactive.

Try:

data () {
    return {
      obj: null
    }
  },
  mounted () {
    this.$set(this, 'obj', {name: 'hello', age:'10', gender: 'not to say'});
    Cookies.set("name", JSON.stringify(this.obj), {expires: '1m'});
    Cookies.get("name");
  }

Later edit: Based on your comment bellow, and the updated code snippet, I still suspect your problem is caused by incorrectly updating your local state.

Since your object is initialized as an empty literal, when you update it with this.obj = objectPassed;in savedDetails you are essentially creating new properties on the object. This type of update will not be reactive, and therefore, your watcher will not do anything. The correct way to ensure reactivity is:

this.$set(this, 'obj', objectPassed);

Read more about reactivity caveats in the official documentation on the topic " Reactivity in depth "