JSFiddle - React, Tailwind, and code Playground

by Alex48

HTML

<div id="app-6">
        <span class="block" v-for="(section, i) in filters.sections">
            <input type="checkbox" :id="section.id" v-model="section.status" @click="updateChecked(i, $event)">
            <label :for="section.id">{{ section.sectionText }}</label>
        </span>
        <div>{{ checkArr }}</div>
        <pre>{{ filters.sections }}</pre>
    </div>

CSS

.block {
	  display: block;
}

JavaScript

let app6 = new Vue({
	el: '#app-6',
	data: {
	  checked: '',
	  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: {
		updateChecked(index, e) {
			this.$nextTick(() => {
				let all = this.filters.sections[0],
					sections = this.filters.sections.slice(1),
					statTrue = sections.filter(section => section.status == true).length,
					statEver = sections.every(section => section.status);

				if (e.target.checked) {
					if (index === 0 || statEver) {
						sections.forEach(section => section.status = false)
						all.status = true;
					} else {
						all.status = false;
					}
				} else {
					if(index === 0 && !statEver && !all.status) {
						all.status = true;
					}
					else if (!all.status &&  statTrue > 0) {
						all.status = false;
					} else {
						all.status = true;
					}
				}
			});
		}
	},
  computed: {
    checkArr() {
      return this.filters.sections.filter(section => section.status).map(section => section.id)
    }
  }
})