I have a problem rendering nested checkboxes in my view. The problem is that I have an array of arrays of button, such as:

var buttons = [
  [{ text: 'hello', checked: false }, { text: 'world', checked: false }],
];

and then I just try to render them with a label:

<div v-for="group in buttons">
  <label v-for="button in group">
    {{ button.text }}
    <input type="checkbox" v-model="button.checked">
  </label>
</div>

I wish to save what the user clicked in the sessionStorage, so they can click a link, go back and their choices will be remembered, or if they wish to do a refresh, it is remembered, but if they close the session and come back later, it should all be reset:

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hi',
    buttons: buttons,
  },
  ready() {
    var buttons = JSON.parse(sessionStorage.getItem('buttons')) || this.buttons
    this.buttons = buttons;
  },
  watch: {
    'buttons': {
      handler(old, val) {
        sessionStorage.setItem('buttons', JSON.stringify(this.buttons));
      },
      deep: true,
    },
  },
});

Now it gets very inconsistent. When I click the very first box, hit refresh, it will remember that and only enable that one. If I have the same checkbox enabled, click a link and go back, all other buttons are enabled! For some reason they get set to true.

If I enable the second checkbox, hit refresh, only that will be enabled. If I click a link, go back, only that checkbox will stay enabled, as expected.

What happens to the first checkbox? I have created a demo to illustrate it, its Gist is here.

I am positive I had this trouble in all my browsers, but for some reason I can now only recreate it in Chrome and Opera, so I suspect it have something to do with the Blink engine? I do have the same problem with Safari in my more complex application, but I can't share that. Firefox plays nicely though, no problem with that.

Thank you in advance.