在鼠标悬停时更改Vue动态图像不起作用

<template>
  <div>
    <img src="默认图像路径" @mouseover="changeImage" @mouseout="resetImage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: "默认图像路径",
    };
  },
  methods: {
    changeImage() {
      // 在鼠标悬停时更改图像
      this.imageSrc = "新的图像路径";
    },
    resetImage() {
      // 在鼠标移出时重置图像
      this.imageSrc = "默认图像路径";
    },
  },
};
</script>

<template>
  <div>
    <img :src="imageSrc" @mouseover="changeImage" @mouseout="resetImage" />
  </div>
</template>