Me disculpo si la pregunta parece tonta. Soy nuevo en Vue.

Tengo un par de botones y un par de divs. Se supone que cada botón, cuando se hace clic, muestra el div correspondiente mientras oculta a todos los demás.

esto es lo que he hecho

 <!-- Buttons --> <div v-for="button in buttons" :key="button" @click="showBox(button.link)"> {{ button.text }} </div> <!-- Boxes --> <div id="about" :class="{ hidden: boxes.about.isHidden }"> About me </div> <div id="resume" :class="{ hidden: boxes.resume.isHidden }"> Resume </div> <div id="contact" :class="{ hidden: boxes.contact.isHidden }"> Contact </div> <script> export default { components: { }, props: { }, data () { return { buttons: [ { text: 'About', link: 'about' }, { text: 'Resume', link: 'resume' }, { text: 'Contact', link: 'contact' }, ], boxes: { about: { isHidden: false }, resume: { isHidden: true }, contact: { isHidden: true }, } } }, methods: { showBox(box) { boxes.box.isHidden = false } } } </script>

Como puede ver, de forma predeterminada, el cuadro Acerca de está visible, pero no estoy seguro de cómo continuar desde aquí. El método showBox() no funciona cuando coloco la variable (caja) que pasé de la función de clic y la coloco así. Tampoco estoy seguro de cuál es la mejor forma de ocultar el resto de las cajas. ¿Recorro los objetos y configuro todo isHidden en verdadero?

Agradezco cualquier ayuda.