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 v-for="(section, i) in filters.sections">
    <input type="checkbox" :id="section.id" v-model="section.status" @change="updateStatus(i, $event)">
    <label :for="section.id">{{ section.sectionText }}</label>
  </div>
  <pre>{{ filters.sections }}</pre>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    filters: {
      sections: [
        { id:      'all', sectionText: 'Все секции', status:  true },
        { 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 },
      ],
    },
  }),
  methods: {
    updateStatus(index, e) {
      if (e.target.checked) {
        const { sections } = this.filters;
        const allStatus = !index || sections.every((n, i) => !i || n.status);

        if (allStatus) {
          sections.forEach((n, i) => n.status = !i);
        }

        sections[0].status = allStatus;
      }
    },
  },
});