Vue.js 3 button not working after first click

Question

The other button are working fine, but only surrender button is not working. When I pressed surrender for the first time it works, but if I start a new game and press surrender again, it doesn't have response anymore. I've tried adding counter in the surrender() methods, but still not working.

function getrandomValue(max, min) {
  return Math.floor(Math.random() * (max - min)) + min
}

const app = Vue.createApp({
  data() {
    return {
      myhealth: 100,
      mobhealth: 100,
      rounds: 0,
      winner: null,
    };
  },

  watch: {
    myhealth(value) {
      if (value <= 0 && this.mobhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Lost"
      }
    },

    mobhealth(value) {
      if (value <= 0 && this.myhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Won"
      }
    }
  },
  computed: {
    playerBarStyle() {
      if (this.myhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.myhealth + '%'
        }
      }
    },

    monsterBarStyle() {
      if (this.mobhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.mobhealth + '%'
        }
      }
    },

    useSP() {
      return this.rounds % 3 !== 0
    }
  },
  methods: {
    newGame() {
      this.myhealth = 100
      this.mobhealth = 100
      this.surrender = false
      this.rounds = 0;
      this.winner = null
      this.surcounter = 0
    },

    attMob() {
      const attValue = getrandomValue(12, 5);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    specialAttack() {
      const attValue = getrandomValue(18, 10);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    attPlayer() {
      const attValue = getrandomValue(15, 8)
      this.myhealth = this.myhealth - attValue
    },

    heal() {
      const healValue = getrandomValue(25, 10)
      this.attPlayer();
      if ((this.myhealth + healValue) >= 100) {
        this.myhealth = 100;
      } else {
        this.myhealth = this.myhealth + healValue
      }

      this.rounds++
    },
    surrender() {
      this.winner = 'You Lost'
    }
  }
});

app.mount('#game')

<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
<script src="https://unpkg.com/vue@next"></script>

<header>
  <h1>Monster Slayer</h1>
</header>
<div id="game">
  <section id="monster" class="container">
    <h2>Monster Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="monsterBarStyle"></div>
    </div>
  </section>
  <section id="player" class="container">
    <h2>Your Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="playerBarStyle"></div>
    </div>
  </section>
  <section class="container" v-if='winner'>
    <h2>Game Over</h2>
    <h3>{{winner}}</h3>
    <button @click='newGame'>New Game</button>
  </section>
  <section id="controls" v-if='!winner'>
    <button @click='attMob'>ATTACK</button>
    <button @click='specialAttack' :disabled="useSP"> SPECIAL ATTACK</button>
    <button @click='heal'>HEAL</button>
    <button @click='surrender'>SURRENDER</button>
  </section>
  <section id="log" class="container">
    <h2>Battle Log</h2>
    <ul></ul>
  </section>
</div>

Answer 1

It's because you're reassigning the surrender method to false in newGame. If you remove that line it works:

function getrandomValue(max, min) {
  return Math.floor(Math.random() * (max - min)) + min
}

const app = Vue.createApp({
  data() {
    return {
      myhealth: 100,
      mobhealth: 100,
      rounds: 0,
      winner: null,
    };
  },

  watch: {
    myhealth(value) {
      if (value <= 0 && this.mobhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Lost"
      }
    },

    mobhealth(value) {
      if (value <= 0 && this.myhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Won"
      }
    }
  },
  computed: {
    playerBarStyle() {
      if (this.myhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.myhealth + '%'
        }
      }
    },

    monsterBarStyle() {
      if (this.mobhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.mobhealth + '%'
        }
      }
    },

    useSP() {
      return this.rounds % 3 !== 0
    }
  },
  methods: {
    newGame() {
      this.myhealth = 100
      this.mobhealth = 100
      this.rounds = 0;
      this.winner = null
      this.surcounter = 0
    },

    attMob() {
      const attValue = getrandomValue(12, 5);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    specialAttack() {
      const attValue = getrandomValue(18, 10);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    attPlayer() {
      const attValue = getrandomValue(15, 8)
      this.myhealth = this.myhealth - attValue
    },

    heal() {
      const healValue = getrandomValue(25, 10)
      this.attPlayer();
      if ((this.myhealth + healValue) >= 100) {
        this.myhealth = 100;
      } else {
        this.myhealth = this.myhealth + healValue
      }

      this.rounds++
    },
    surrender() {
      this.winner = 'You Lost'
    }
  }
});

app.mount('#game')

<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
<script src="https://unpkg.com/vue@next"></script>

<header>
  <h1>Monster Slayer</h1>
</header>
<div id="game">
  <section id="monster" class="container">
    <h2>Monster Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="monsterBarStyle"></div>
    </div>
  </section>
  <section id="player" class="container">
    <h2>Your Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="playerBarStyle"></div>
    </div>
  </section>
  <section class="container" v-if='winner'>
    <h2>Game Over</h2>
    <h3>{{winner}}</h3>
    <button @click='newGame'>New Game</button>
  </section>
  <section id="controls" v-if='!winner'>
    <button @click='attMob'>ATTACK</button>
    <button @click='specialAttack' :disabled="useSP"> SPECIAL ATTACK</button>
    <button @click='heal'>HEAL</button>
    <button @click='surrender'>SURRENDER</button>
  </section>
  <section id="log" class="container">
    <h2>Battle Log</h2>
    <ul></ul>
  </section>
</div>