JSFiddle - React, Tailwind, and code Playground

by Alex48

HTML

<div id="app-6">
        <span class="block" v-for="section in filters.sections">
            <input type="checkbox" :id="section.id" v-model="section.status">
            <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: {

	},
	computed: {
		checkArr(e) {
			let statTrue = 0,
				sectionsArr = this.filters.sections;

			sectionsArr.forEach((section, i) => {
				if (sectionsArr[i].status == true) statTrue++;
			});

			sectionsArr.forEach((section, i) => {
				let firstEl = () => (i == 0) ? section : '',
					firstElStatus = () => (i == 0) ? section.status : false;


				if(firstElStatus() && statTrue == 2) {
					firstEl().status = false;

				}

				if (statTrue >= sectionsArr.length - 1) {
					section.status = false;
					firstEl().status = true;
				}
        
				if (statTrue >= sectionsArr.length - 1) {
				 		section.status = false;
				 		firstEl().status = true;
				}
			});
			return sectionsArr.filter(section => section.status).map(section => section.id);
		}
	}
  })