JSFiddle - React, Tailwind, and code Playground

by kulakoff

HTML

<div id="app-6">
        <span class="block" v-for="section in filters.sections" :key="section.id">
            <input type="checkbox" :id="section.id" v-model="section.status" @change="select(section.id)">
            <label :for="section.id">{{ section.sectionText }}</label>
        </span>
        <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: {
    select(id) {
      let sections = this.filters.sections.slice(1)
      if (sections.every(i => i.status)) {
        sections.forEach(i => i.status = false)
        this.filters.sections[0].status = true
      } else {
        if(id === 'all') {
          sections.forEach(i => i.status = false)
        } else {
          this.filters.sections[0].status =false
        }
      }
      
    }
	}
	
  })