如何在vue.js中更改鼠标悬停时的图像？

<template>
  <div>
    <img src="default-image.jpg" v-bind:src="hoveredImage" v-on:mouseover="changeImage" v-on:mouseout="resetImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultImage: "default-image.jpg",
      hoveredImage: "default-image.jpg"
    };
  },
  methods: {
    changeImage() {
      this.hoveredImage = "hovered-image.jpg";
    },
    resetImage() {
      this.hoveredImage = this.defaultImage;
    }
  }
};
</script>