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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>Vue Js load data without reloading page</h3>
      <div v-if="dataLoaded">
        <table class="currency-table">
          <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 v-else>Loading...</div>
      <div id="toast" v-if="showToast">{{ toastMessage }}</div>
    </div>

mounted() {
          this.loadData(); // Initial data load
          setInterval(() => {
            this.loadData(); // Load data every 6 sec (adjust the interval as needed)
          }, 6000); // 6 sec in milliseconds
        },
      });
      app.mount("#app");
    </script>
    <style scoped>
      #app {
        margin: 0 auto;
        width: 800px;
      }

/* Table styles */
      .currency-table {
        border-collapse: collapse;
        width: 100%;
        max-width: 800px;
        background-color: #ffffff;
      }

.currency-table th,
      .currency-table td {
        padding: 10px 15px;
        text-align: left;
      }

.currency-table thead {
        background-color: #f0f0f0;
        font-weight: bold;
      }

.currency-table tbody tr {
        border-bottom: 1px solid #e0e0e0;
      }

.currency-table tbody tr:last-child {
        border-bottom: none;
      }

/* Loading message styles */
      div[v-else] {
        padding: 20px;
        font-size: 18px;
        font-weight: bold;
      }
      /* Toast message styles */
      #toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;

transition: opacity 0.3s, visibility 0s 0.3s;
      }
    </style>
  </body>
</html>