How correct is this vuejs entry?

Question

JavaScript

As a beginner, I want to ask, how correct is this method entry in Vuejs? Or is it a bicycle, because if there were not 2 buttons, but 3 or more, it would be difficult to write such conditions.

<button class="modal-heading__button modal-heading__button-login"  @click="LoginViewShow" :class="{mhactive: isActive = LoginView}">Вход</button>

<button class="modal-heading__button modal-heading__button-reg" @click="RegViewShow" :class="{mhactive: isActive = RegView}">Регистрация</button>

data(){
      return {
      LoginView: true,
      RegView: false
      }
    },
    methods: {
      RegViewShow() {
        this.RegView = true,
        this.LoginView = false
      },
      LoginViewShow() {
        this.LoginView = true,
        this.RegView = false
      }
    }

Answer 1

Here is an abbreviation

<button class="modal-heading__button modal-heading__button-login"  v-if="view==='log'" @click="view='reg'">login</button>
<button class="modal-heading__button modal-heading__button-register"  v-else-if="view==='reg'" @click="view='3rd'">register</button>
<button class="modal-heading__button modal-heading__button-thirdOption"  v-else-if="view==='3rd'" @click="view='log'">the wae of the deval</button>

...
data(){
    return {
        view: 'log'
    }
}
...

here is the sandbox if cho
https://codepen.io/origami1024/pen/bGbyWaO
UPD: more abbreviations