页面自动刷新和注册逻辑问题

rt，代码如下：

<template>
  <div>
    <form v-if="!isReg">
      <label for="name1">User Name: </label>
      <input type="text" id="name1" v-model="name"><br>
      <label for="pwd1">Password: </label>
      <input type="password" id="pwd1" v-model="pwd"><br>
      <button @click="login()">Login</button>
      <button @click="reg()">register</button>
    </form>
    <form v-else>
      <label for="name2">User Name: </label>
      <input type="text" id="name2" v-model="name"><br>
      <label for="pwd2">Password: </label>
      <input type="password" id="pwd2" v-model="pwd"><br>
      <label for="pwda">Password Again: </label>
      <input type="password" id="pwda" v-model="pwda"><br>
      <button @click="confirm()">confirm register</button>
      <button @click="cancel()">cancel register</button>
    </form>
  </div>
</template>

login() {
  this.$router.push('home')
},
reg() {
  this.isReg = true
},
cancel() {
  this.isReg = false
},
confirm() {
  if(this.pwd === this.pwda && this.name !== '' && this.pwd !== '') {
    localStorage.setItem('name',this.name)
    localStorage.setItem('pwd',this.pwd)
    this.name = ''
    this.pwd = ''
    this.isReg = false
  } else {
    alert("两次输入不一致")
  }
}

没有报错，问题在于点击任意按钮时页面都会自动刷新，这就导致点击注册时，注册表单一闪而过刷新回登录，此时url为localhost:8080/?，我重启服务、浏览器都没有用。

还有最后这个confirm函数，空信息注册会弹窗，但是localstorage也会存数据，相当于两个分支都走了一遍，有点不可思议，是我判断的条件有问题吗？

有点懵，还请赐教。