JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

  <div class="block">
    <button @click.prevent="mytoggle(0)">block one</button>
    <div v-show="boxes[0].value">
      <p>i am box number one</p>
      <p>i am box number one</p>
    </div>
  </div>

  <div class="block">
    <button @click.prevent="mytoggle(1)">block two</button>
    <div v-show="boxes[1].value">
      <p>i am box number two</p>
      <p>i am box number two</p>
    </div>
  </div>

  <div class="block">
    <button @click.prevent="mytoggle(2)">block three</button>
    <div v-show="boxes[2].value">
      <p>i am box number three</p>
      <p>i am box number three</p>
    </div>
  </div>

  <pre>{{ boxes | json}}</pre>

</div>

JavaScript

var vm = new Vue({
    el: '#app',
    data: {
        boxes: [{value:false},{value:true},{value:false}]
    },
    methods: {
        mytoggle: function (n) {  
            for(var i = 0; i < 3; i++) { // close all boxes
                vm.boxes[i].value = false;
            }
            //alert(this.boxes[n]);
            this.boxes[n].value = true; // open the corresponding box
        }
    }
});