Vue Js change image on hover

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Vue Change Image on Hover</h1>
    <img v-bind:src="imageSrc" v-on:mouseover="changeImage" v-on:mouseout="resetImage">
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          imageSrc: 'https://www.sarkarinaukriexams.com/images/editor/1691754246bird-g8b2ad9bcc_640.jpg'
        }
      },
      methods: {
        changeImage() {
          this.imageSrc = 'https://www.sarkarinaukriexams.com/images/editor/1691754318flower-gf39467e8f_640.jpg'
        },
        resetImage() {
          this.imageSrc = 'https://www.sarkarinaukriexams.com/images/editor/1691754246bird-g8b2ad9bcc_640.jpg'
        }
      }
    });
  </script>
<style scoped>
    #app {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

img {
      width: 300px;
      height: auto;
      transition: transform 0.5s ease-in-out;
      cursor: pointer
    }
</style>
</body>
</html>