Vue Js Fetch data from API | Load Data without reoloading Page

<div v-if="errored" class="errored">
        <p>We apologize, but we are unable to retrieve data at the moment. Please try again later.</p>
        <svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#666">
          <g fill="none" fill-rule="evenodd">
            <g transform="translate(1 1)" stroke-width="2">
              <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
              <path d="M36 18c0-9.94-8.06-18-18-18">
                <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s"
                  repeatCount="indefinite" />
              </path>
            </g>
          </g>
        </svg>
      </div>

<div v-else-if="loading" class="loading">
        <p>Loading...</p>
        <svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#666">
          <g fill="none" fill-rule="evenodd">
            <g transform="translate(1 1)" stroke-width="2">
              <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
              <path d="M36 18c0-9.94-8.06-18-18-18">
                <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s"
                  repeatCount="indefinite" />
              </path>
            </g>
          </g>
        </svg>
      </div>

<table v-else>
        <thead>
          <tr>
            <th>Code</th>
            <th>Symbol</th>
            <th>Rate</th>
            <th>Description</th>
            <th>Rate Float</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, key) in items" :key="key">
            <td>{{ item.code }}</td>
            <td>{{ item.symbol }}</td>
            <td>{{ item.rate }}</td>
            <td>{{ item.description }}</td>
            <td>{{ item.rate_float }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          items: null,  // To hold the fetched data
          loading: true,  // To show loading message
          errored: false,  // To show error message
        };
      },

// Fetch data from API endpoint on mount

async mounted() {
        try {
          const response = await axios.get('https://api.coindesk.com/v1/bpi/currentprice.json');
          this.items = response.data.bpi;
        } catch (error) {
          console.error(error);
          this.errored = true;
        } finally {
          this.loading = false;
        }
      },
    })
  </script>
  <style scoped>
    /* Center the container */
    .container {
      margin: 0 auto;
      max-width: 800px;
    }

/* Style the table */
    table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
    }

th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
    }

th {
      background-color: #f2f2f2;
    }

/* Style the loading and error messages */
    .loading,
    .errored {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
    }

.loading p,
    .errored p {
      color: #666;
      font-style: italic;
      font-size: 18px;
      text-align: center;
      margin-top: 20px;
    }

.loading svg,
    .errored svg {
      animation: spin 2s linear infinite;
    }

@keyframes spin {
      from {
        transform: rotate(0deg);
      }

to {
        transform: rotate(360deg);
      }
    }
  </style>
</body>

</html>