JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  <div>
    <input type="checkbox" :id="filters.all.id" v-model="filters.all.status">
    <label :for="filters.all.id">{{ filters.all.sectionText }}</label>
  </div>
  <div v-for="section in filters.sections">
    <input type="checkbox" :id="section.id" v-model="section.status">
    <label :for="section.id">{{ section.sectionText }}</label>
  </div>
  <pre>{{ sectionsWithAll }}</pre>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    filters: {
      all: {
        id: 'all',
        sectionText: 'Все секции',
        status: true,
      },
      sections: [
        { id: 'section1', sectionText: 'Секция №1', status: false },
        { id: 'section2', sectionText: 'Секция №2', status: false },
        { id: 'section3', sectionText: 'Секция №3', status: false },
        { id: 'section4', sectionText: 'Секция №4', status: false },
        { id: 'section5', sectionText: 'Секция №5', status: false },
      ],
    },
  }),
  watch: {
    'filters.all.status'(val) {
      if (val) {
        this.filters.sections.forEach(n => n.status = false);
      }
    },
    'filters.sections': {
      deep: true,
      handler(val) {
        if (val.every(n => n.status)) {
          this.filters.all.status = true;
        } else if (val.some(n => n.status)) {
          this.filters.all.status = false;
        }
      }
    },
  },
  computed: {
    sectionsWithAll() {
      return [this.filters.all].concat(this.filters.sections);
    },
  },
});