Vue Get Image from URL

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Get Image from url</h3>
    <img :src="imageUrl" alt="Image">
    <div>
      <button @click="prevImage">Previous</button>
      <button @click="nextImage">Next</button>
    </div>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          imageUrl: null,
          page: 1,
          perPage: 10,
          totalHits: null,
          currentImageIndex: 0
        };
      },
      mounted() {
        this.fetchImages();
      },
      methods: {
        fetchImages() {
          axios
            .get(`https://pixabay.com/api/?key=34464713-d6983b6f7516f75f27cdcbb6b&q=nature&page=${this.page}&per_page=${this.perPage}`)
            .then(response => {
              console.log(response.data)
              this.imageUrl = response.data.hits[this.currentImageIndex].webformatURL;
              this.totalHits = response.data.totalHits;
            })
            .catch(error => {
              console.error(error);
            });
        },
        prevImage() {
          if (this.currentImageIndex > 0) {
            this.currentImageIndex--;
          } else {
            this.page--;
            this.currentImageIndex = this.perPage - 1;
            if (this.page < 1) {
              this.page = 1;
              this.currentImageIndex = 0;
            }
          }
          this.fetchImages();
        },
        nextImage() {
          if (this.currentImageIndex < this.perPage - 1 && this.currentImageIndex < this.totalHits - 1) {
            this.currentImageIndex++;
          } else {
            this.page++;
            this.currentImageIndex = 0;
            if (this.page * this.perPage > this.totalHits) {
              this.page = Math.ceil(this.totalHits / this.perPage);
            }
          }
          this.fetchImages();
        }
      }
    });

app.mount("#app");
  </script>
  <style scoped>
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
    }

h3 {
      font-size: 24px;
      text-align: center;
    }

img {
      max-width: 100%;
      height: auto;
      margin-top: 20px;
    }

button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      margin:  10px;
      cursor: pointer;
    }

button:hover {
      background-color: #0062cc;
    }
  </style>

</body>

</html>