Indeterminate checkboxes with Vue.js

I just started out working with Vue and I'm trying to visualise a nested list.

The list-items should contain triple-state checkboxes: When a child item is checked, the parent item's checkbox should become 'indeterminate'. When all child-checkboxes are checked, the parent checkbox should also become checked. When a parent item checkbox is checked, all child item checkboxes (also the ones nested deeper) should be selected too.

I kind of have a working solution (check out this pen or the code below) but the checkbox-logic is still flawed. I've run out of ideas how to fix it. Could someone shed some light on how to accomplish this in Vue?

'use strict';

Vue.component("book-chapter", Vue.extend({
  name: "book-chapter",
  props: ["data", "current-depth"],
  data: function() {
    return {
      checked: this.data.checked,
      indeterminate: this.data.indeterminate || false
    };
  },
  methods: {
    isChecked: function() {
      return this.checked && !this.indeterminate;
    },
    isIndeterminate: function(){
      return this.indeterminate;
    },
    toggleCheckbox: function(eventData) {
      this.checked = !this.checked;

      if (eventData) {
        // fired by nested chapter
        this.$emit('checked', eventData);

      } else {
        // fired by top level chapter
        this.checked = !this.checked;
        this.$emit('checked', {
          data: this.data
        });
      }
    },
    isRootObject: function() {
      return this.currentDepth === 0;
    },
    isChild: function() {
      return this.currentDepth === 2;
    },
    isGrandChild: function() {
      return this.currentDepth > 2;
    }
  },
  template: `
  <div class='book__chapters'>
   <div
      class='book__chapter'
      v-bind:class="{ 'book__chapter--sub': isChild(), 'book__chapter--subsub': isGrandChild() }"
      v-show='!isRootObject()'>
      <div class='book__chapter__color'></div>
      <div
         class='book__chapter__content'
         v-bind:class="{ 'book__chapter__content--sub': isChild(), 'book__chapter__content--subsub': isGrandChild() }">
         <div class='book__chapter__title'>
            <span class='book__chapter__title__text'></span>
         </div>
         <div class='book__chapter__checkbox triple-checkbox'>
            <div class='indeterminatecheckbox'>
               <div
                  class='icon'
                  @click.stop="toggleCheckbox()"
                  v-bind:class="{'icon--checkbox-checked': isChecked(), 'icon--checkbox-unchecked': !isChecked(), 'icon--checkbox-indeterminate': isIndeterminate()}">
               </div>
            </div>
         </div>
      </div>
   </div>
   <book-chapter
      ref='chapter'
      :current-depth='currentDepth + 1'
      v-for='child in data.children'
      key='child.id'
      @checked='toggleCheckbox(arguments[0])'
      :data='child'>
   </book-chapter>
</div>
`
}));

Vue.component("book", Vue.extend({
  name: "book",
  props: ["data"],
  template: `
    <div class='book'>
      <book-chapter 
        :data='this.data'
        :currentDepth='0'>
      </book-chapter>
    </div>
`
}));

var parent = new Vue({
  el: "#container",
  data: function() {
    return {
      book: {}
    };
  },
  mounted: function() {
    this.book = {
      "title": "Book",
      "children": [{
        "title": "1 First title",
        "children": [{
          "title": "1.1 Subtitle"
        }, {
          "title": "1.2 Subtitle"
        }]
      }, {
        "title": "2 Second title",
        "children": [{
          "title": "2.1 Subtitle",
          "children": [{
            "title": "2.1.1 Sub-Sub title"
          }, {
            "title": "2.1.2 Another sub-sub title"
          }]
        }]
      }]
    }
  }
});