How to shorten "this" miracle, or make it easier?

Question

Vue.js

Good evening, night, day, ladies and gentlemen.

There is data in which:

twoActive: false,
      isActive: false,

There is methods in which:

twoact(){
      this.isActive = false
      this.twoActive = true
    },
    wtactiv(){
      this.twoActive = false
      this.isActive = true
    },

Well, there are two headers h1, h2:

<h1 class="static fir" @click="wtactiv" v-bind:class="{ actived: isActive }">первое</h1>
    <h2 class="static sec" @click="twoact" v-bind:class="{ actived: twoActive  }">второе</h2>

The thing is...
These two methods, so to speak, "clean up" after themselves, changing each other's values ​​from true to false.
But, what if I have a lot of headings, and those have subheadings?
How to be? I shouldn't "clean up" after all, otherwise there will be a lot of these this.* =* - and each method should have at least 17,

how to be?

Answer 1

Create an array of states and reset the state for unselected elements (this is if something like a list of checkboxes). Else just keep an array and the index of the selected element.

Answer 2

<div  v-bind:class="{ active: isActive }">
  <h1 class="static fir" @click="switch">первое</h1>
    <h2 class="static sec" @click="switch">второе</h2>
</div>