Vue Js Increase Decrease Image Size on click

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <h3>Vue Js Increase Decrease Image Size on click</h3>

<img :src="'https://www.sarkarinaukriexams.com/images/post/1684081113flowers-gb1ab1f400_640.jpg'"
      :width="imageWidth">
    <div>
      <button @click="zoomIn">Zoom In</button>
      <button @click="zoomOut">Zoom Out</button>
    </div>

</div>

<script type="module">
    const app = Vue.createApp({
      data() {
        return {
          imageWidth: 250,
          maxZoomInWidth: 500,
          maxZoomOutWidth: 50,
        };
      },
      methods: {
        zoomIn() {
          if (this.imageWidth >= this.maxZoomInWidth) {
            alert("Highest possible level of zoom has been reached.");
          } else {
            this.imageWidth += 50;
          }
        },
        zoomOut() {
          if (this.imageWidth <= this.maxZoomOutWidth) {
            alert("Lowest possible level of zoom has been reached.");
          } else {
            this.imageWidth -= 50;
          }
        },
      },
    });

app.mount('#app');
  </script>
  <style scoped>
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
    }

h3 {
      margin-top: 0;
    }

img {
      border: 1px solid black;
    }

button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid black;
      background-color: white;
      color: black;
      cursor: pointer;
    }

button:hover {
      background-color: black;
      color: white;
    }
  </style>
</body>

</html>