<div id="demo">
<div
     v-for="Category in mainCategories"
     v-bind:country="Category"
     v-bind:key="Category.id">
  <div>
<input
              v-if="Category.isChecked"
              class="country__chekbox"
              type="checkbox"
              :value="Category.id"
              checked="Category.isChecked"
              @change="selectAll"
       v-model="checkedCategories"
          />
    <input
              v-else
              class="country__chekbox"
              type="checkbox"
              :value="Category.id"
              checked="Category.isChecked"
              @change="selectElem($elem)"
           v-model="checkedCategories"
          />
          <span class="country-span">{{Category.title}}</span>
  </div> 
  </div>
  </div>

var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [
      {id:1, title: "Main Checkbox", isChecked: true},
      {id:2, title: "2 Checkbox", isChecked: true},
      {id:3, title: "3 Checkbox", isChecked: true},
      {id:4, title: "4 Checkbox", isChecked: true},
      {id:5, title: "5 Checkbox", isChecked: true},
      {id:5, title: "6 Checkbox", isChecked: true},
    ] 
  },
  methods: {
      selectAll() {
        return this.mainCategories.map(item => {
          return item.isChecked = true ? false : true
        })
      },
      selectElement(e) {
        console.log(this.checkedCountry)
      }
    }
})