Vue.js Accordion

HTML

<div id="app">
  <div v-for="(index,c) in categories" class="block">
    <div  @click="mytoggle(index)">{{c.n}} </div>
    <div v-show="c.show">
      <div v-for="(index,question) in c.qs">
          <div>
            {{question.q}}
          </div>
          <div>
            {{question.a}}
          </div>
      </div>     
    </div>
  </div> 
</div>

JavaScript

var vm = new Vue({
    el: '#app',
    data: {       
        categories: [{n:"1", show:false, qs:[{q:"q1",a:"a1"},{q:"q2",a:"a2"}]},
        			{n:"2",show:false},
              {n:"3", show:false},
              {n:"4", show:false}]
    },
    methods: {
        mytoggle: function (n) {  
            for(var i = 0; i < this.categories.length; i++) { // close all boxes
                //vm.boxes[i].show = false;
                this.categories[i].show = false;
                
            }
            //vm.boxes[n].show = true; // open the corresponding box
            this.categories[n].show = true;
        }
    }
});