Vue JS аккордеон. Напишем простой Аккордеон

Поискал быстрые решения в Vue Js для организации аккордеона.
Поисковики выдают только какие-то плагины.
Но, для такого небольшого функционала подключать плагин не хочется.
Да и если подключать на каждый чих плагин, то потом будет сложно поддерживать такой зверинец.
Поэтому написал простой код. И делюсь им:

Пример работающего аккордеона на vue js можно посмотреть здесь:
http://zufar.ru/examples/vuejs/vuejs_accordion_ru.html

Итак сначала наш html-код:

<div class="accordion" id="accordion">
	
<div class="accordion-item">
		
<h3 class="accordion-item-head" v-on:click="accordion">
			Первый пункт
		</h3>

		
<div class="accordion-item-body">
			Кто, по-вашему, этот мощный старик? Не говорите, вы не можете этого знать. Это — гигант мысли, отец русской демократии и особа, приближенная к императору.
		</div>

	</div>


	
<div class="accordion-item">
		
<h3 class="accordion-item-head" v-on:click="accordion">
			Второй пункт
		</h3>

		
<div class="accordion-item-body"> 
				Кто, по-вашему, этот мощный старик? Не говорите, вы не можете этого знать. Это — гигант мысли, отец русской демократии и особа, приближенная к императору.
		</div>

	</div>


	
<div class="accordion-item">
		
<h3 class="accordion-item-head" v-on:click="accordion">
			Третий пункт
		</h3>

		
<div class="accordion-item-body">
				Кто, по-вашему, этот мощный старик? Не говорите, вы не можете этого знать. Это — гигант мысли, отец русской демократии и особа, приближенная к императору.
		</div>

	</div>

</div>

Структура кода здесь простая.
Нам нужно показывать или скрыть блоки с классом .accordion-item-body.
Делать мы будем это с помощью селектора соседних элементов плюса (+):
Вот css-код:

.accordion-item{
	position: relative;
}

.accordion-item-head{
	background-color: #dfdfdf;
	border-top-left-radius: 5px ;
	border-top-right-radius: 5px;
	cursor: pointer;
	padding:10px;
}


.accordion-item-head:after{    
	content: ' > ';
	display: block;
	height: 29px;
	position: absolute;
	right: 25px;
	transform: rotate(90deg) scaleY(2);
	top: 8px;
}

.accordion-item-head.active:after{
	content: ' < ';
}


.accordion-item-body{
	display: none;
} 
.accordion-item-head.active + .accordion-item-body{
	display: block !important;
}

Далее мы подключаем фреймворк VueJs.

И теперь самое главное JavaScript:

var app = new Vue({
    el: '#accordion',
    data: {        
    },
    methods: {
        accordion: function (event) {            

        //Раскомментировать, если нужно, чтобы закрывались остальные пункты при открытии текущего
       // 	var matches = document.querySelectorAll('.accordion-item-head');
       //  	for(var i = 0; i < matches.length; i++) {
       //  		matches[i].classList.remove('active');
       //	 }

             event.target.classList.toggle('active');
        }
    }

});

Здесь тоже все до ужаса просто.
Все основное происходит в этой строке:

event.target.classList.toggle('active');

Мы добавляем заголовку h3 css-класс active.

Затем с помощью css показываем следующий соседний элемент:

.accordion-item-head.active + .accordion-item-body{
	display: block !important;
}

Весь код на jsfiddle: