Vue Js Fetch JSON data then push to Array

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>

<body>
    <div id="app">
      <div class="container">
        <h3>Vue Js Fetch JSON data then push to Array</h3>
        <ul v-for="item in dataArray" :key="item.id">
          <li>{{ item.code }}</li>
          <li>{{ item.symbol }}</li>
          <li>{{ item.rate }}</li>
          <li>{{ item.description }}</li>
          <li>{{ item.rate_float }}</li>
        </ul>
      </div>
    </div>

<script type="module">
      const app = Vue.createApp({
        data() {
          return {
            jsonData: {},
            dataArray: [],
          };
        },
        mounted() {
          axios
            .get("https://api.coindesk.com/v1/bpi/currentprice.json") // Replace with your API endpoint
            .then((response) => {
              this.jsonData = response.data; // Save the fetched data to the jsonData property
              this.pushToArray(); // Call the method to push the data to the array
            })
            .catch((error) => {
              console.error(error);
            });
        },
        methods: {
          pushToArray() {
            this.dataArray.push(...Object.values(this.jsonData.bpi));
          },
        },
      });

app.mount("#app");
    </script>

<style scoped>
      /* CSS for the container */
      .container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f4f4f4;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

/* CSS for the heading */
    </style>
  </body>
</html>