Cookie values do not get properly updated - Vue cookies

Question

Here's what I want to do:

I am looking to store user preferences (Possibly 2-3 users max) in a cookie so they are readily available.

Upon login, I check if I have an existing 'users' cookie and if not, I create it. If it exists, I check if my current user is inside this cookie. If not, I add him, with empty prefs.

vue: 2.4.16 vue-cookies: 1.7.4

   loggedIn (userId) {
      this.profile = userId
      this.userConnected = true
      if (this.$cookies.isKey('users')) {
        const userBase = JSON.parse(this.$cookies.get('users'))
        const found = userBase.findIndex(user => user.profile === this.profile)
        if (found === -1) {
          console.log('new user, add to cookie')
          const newUser = {
            profile: this.profile,
            preferences: {
              cursor: null,
              wallpaper: null,
              theme: null
            }
          }
          userBase.push(newUser)
          this.$cookies.set('users', JSON.stringify(userBase), 604800)
        }
      } else {
        console.log('no cookie, create users cookie')
        const newUsers = [
          {
            profile: this.profile,
            preferences: {
              cursor: null,
              wallpaper: null,
              theme: null
            }
          }
        ]
        this.$cookies.set('users', JSON.stringify(newUsers), 604800)
      } 

So far so good. Everything seems to work properly. I then have my function to update preferences and update the cookie. The problem occurs when I have more than one users in my cookie. The first object in my cookie array will always get modified properly, but any other user in the Array will be ignored completely. This only happens with the cookie, the data that I'm pushing into the cookie is looking good. Here's more details:

updatePreferences (preference, data) {
   //- We are getting the Users cookie, and finding the current active user
   const globalPreferences = JSON.parse(this.$cookies.get('users'))
   const userIndex = globalPreferences.findIndex(user => user.profile === this.$store.state.User.userProfile)
   const currentUser = globalPreferences[userIndex]

   if (preference === 'wallpaper') {
      currentUser.preferences.wallpaper = data
      globalPreferences.splice(userIndex, 1, currentUser)
      //- globalPreferences is always properly updated. The console log always reflects the changes
      const updatedData = JSON.stringify(globalPreferences)
      //- The cookie does not properly update. Only the first index ever gets updated, the rest never changes.
      this.$cookies.set('users', updatedData, 604800)
   }
}

I am definitely lost here. I have tried removing the cookie before updating it again, but without luck either. Any help would be appreciated. Thanks!

First user update - Console log (Works properly)

Second user update - Console log (Cookie does not update value)

Answer 1

The data I was trying to push into the cookie was too big. I'm gonna use localStorage for now as it properly updates my data, and will make sure to clean the unused informations.