Vue 代码无法正常显示？解决 `currentBeastStatusImg` 和 `currentBeastAlt` 属性问题

<template>
  <div class='wrapper'>
    <div class='current-status'>
      <img :src='currentBeastStatusImg' :alt='currentBeastAlt' />
      <p>{{ currentBeast }}'s turn</p>
    </div>
    <div class='board'>
      <div class='cell' v-for='(cell, index) in cells' :key='index' @click='handleCellClick(index)'></div>
    </div>
    <div class='game-end-overlay' :class='{ show: gameEnd }'>
      <div class='winning-message'>
        <p>{{ winningMessage }}</p>
      </div>
      <div class='btn-container'>
        <button class='reset-button' @click='resetGame'>play again</button>
      </div>
    </div>
    <video src='@/assets/03.mp4' muted loop autoplay></video>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cells: Array(9).fill(null),
      currentBeast: 'unicorn',
      currentBeastStatusImg: require('@/assets/1.gif'),
      currentBeastAlt: 'unicorn',
      gameEnd: false,
      winningMessage: '',
      winningMessageImg: null,
      unicornTurn: true,
      winningCombinations: [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
      ]
    };
  },
  methods: {
    handleCellClick(index) {
      if (this.gameEnd || this.cells[index]) return;

      this.cells[index] = this.currentBeast;
      this.$set(this.cells, index, this.currentBeast);

      if (this.checkWin(this.currentBeast)) {
        this.winningMessage = `${this.currentBeast} wins!!!`;
        this.gameEnd = true;
        this.winningMessageImg = this.currentBeastStatusImg;
        return;
      }
      if (this.isDraw()) {
        this.winningMessage = 'draw!';
        this.gameEnd = true;
        return;
      }
      this.swapTurns();
      this.updateCurrentStatus();
    },
    checkWin(currentBeast) {
      return this.winningCombinations.some(combination => {
        return combination.every(i => {
          return this.cells[i] === currentBeast;
        });
      });
    },
    isDraw() {
      return this.cells.every(cell => cell !== null);
    },
    swapTurns() {
      this.unicornTurn = !this.unicornTurn;
    },
    updateCurrentStatus() {
      if (this.unicornTurn) {
        this.currentBeast = 'unicorn';
        this.currentBeastStatusImg = require('@/assets/1.gif');
        this.currentBeastAlt = 'unicorn';
      } else {
        this.currentBeast = 'dragon';
        this.currentBeastStatusImg = require('@/assets/2.gif');
        this.currentBeastAlt = 'dragon';
      }
    },
    resetGame() {
      this.cells = Array(9).fill(null);
      this.currentBeast = 'unicorn';
      this.currentBeastStatusImg = require('@/assets/1.gif');
      this.currentBeastAlt = 'unicorn';
      this.gameEnd = false;
      this.winningMessage = '';
      this.winningMessageImg = null;
      this.unicornTurn = true;
    }
  },
  created() {
    this.updateCurrentStatus();
  }
};
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  font-family: 'Bungee Inline', cursive;
  color: #f5f5f5;
  overflow: hidden;
}

video {
  position: absolute;
  z-index: -999;
}

.wrapper {
  background-color: #55acee53;
  padding: 50px;
}

.current-status {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

.current-status p {
  margin: 0 5px 0 0;
  font-size: 24px;
}

.current-status img {
  width: auto;
  height: 32px;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  grid-template-rows: repeat(3, minmax(90px, 1fr));
  grid-gap: 12px;
  width: 100%;
  height: 100%;
  max-width: 495px;
  margin: 0 auto 15px;
}

/* 鼠标悬浮的时候显示图片 */
.board.unicorn .cell:not(.dragon):not(.unicorn):hover::before,
.board.dragon .cell:not(.dragon):not(.unicorn):hover::before {
  content: '';
  width: 70%;
  height: 70%;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-size: contain;
  opacity: 50%;
}

.board.unicorn .cell:not(.dragon):hover::before {
  background-image: url('@/assets/1.gif');
}

.board.dragon .cell:not(.unicorn):hover::before {
  background-image: url('@/assets/2.gif');
}

.cell {
  cursor: pointer;
  position: relative;
  background-color: #f5f5f5;
  width: 90px;
  height: 90px;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.cell:hover {
  opacity: 1;
}

.cell.dragon,
.cell.unicorn {
  opacity: 1;
  position: relative;
  cursor: not-allowed;
}

.cell.dragon::before,
.cell.unicorn::before {
  content: '';
  width: 70%;
  height: 70%;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-size: contain;
}

.cell.dragon::before {
  background-image: url('@/assets/1.gif');
}

.cell.unicorn::before {
  background-image: url('@/assets/2.gif');
}

.game-end-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0d1021;
}

.game-end-overlay.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.winning-message {
  margin: -50px 0 20px;
}

.winning-message img {
  width: 100px;
}

.winning-message p {
  font-size: 48px;
  margin: 0;
}

.btn-container {
  position: relative;
}

.reset-button {
  color: #f5f5f5;
  font-family: 'Bungee Inline', cursive;
  font-size: 30px;
  white-space: nowrap;
  border: none;
  padding: 10px 20px;
  background-color: #a186be;
  box-shadow: 5px 5px 0 #55acee;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
  position: relative;
}

.reset-button:hover {
  transform: scale(1.2);
}

.reset-button:active {
  top: 6px;
  left: 6px;
  box-shadow: none;
  background-color: #9475b5;
}
</style>