<div id="demo">
  <div
    v-for="category in mainCategories"
    :key="category.id"
  >
    <div>
      <input
        v-if="category.id == 0"
        v-model="mainCheck"
        type="checkbox"
        :checked="mainCheck"
        :indeterminate.prop="mainCheck === undefined"
        :value="category.id"
      />
      <input
        v-else
        v-model="category.isChecked"
        type="checkbox"
        :checked="category.isChecked"
        :value="category.id"
      />
      <span class="country-span">
        {{category.title}}
      </span>
    </div> 
  </div>
  <span>
    {{checkedList}}
  </span>
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [
      {id:0, title: "Main Checkbox", isChecked: true},
      {id:1, title: "2 Checkbox", isChecked: true},
      {id:2, title: "3 Checkbox", isChecked: true},
      {id:3, title: "4 Checkbox", isChecked: true},
      {id:4, title: "5 Checkbox", isChecked: true},
      {id:5, title: "6 Checkbox", isChecked: true},
    ] 
  },
  computed: {
    checkedList() {
      return this.mainCategories
        .filter(el => el.isChecked && el.id !== 0)
        .map(el => el.title)
    },
    mainCheck: {
      get() {
        [allChecked, noneChecked] = this.mainCategories
          .reduce(
            (acc, val) => {
              if (val.id === 0) {
                return acc
              }
              acc[0] &= val.isChecked
              acc[1] &= !val.isChecked
              return acc
            },
            [true, true]
          )
        if (allChecked) {
          return true
        }
        if (noneChecked) {
          return false
        }
        return undefined
      },
      set(check) {
        this.mainCategories.forEach(
          el => {
            el.isChecked = check
          }
        )
      }
    }
  }
})