Fetch API Accumulative Memory Spike When Refreshing

I’m having an issue where I am fetching from a website in my Vue project, and the memory usage grows every refresh – when I first run the project in development mode and check the memory usage in my browser, the page sits at around 40 MB ram usage. However after refreshing somewhat frequently it goes over 1 GB ram usage, after which it does tend to reset. I am not sure if this is intended garbage collection but I would like to prevent the memory usage from peaking so high if possible. Any help would be appreciated!

Here is my API code which fetches the information:

export async function api(subDirectory) {
  try {
    const res = await fetch(
      `https://wheelcollectors.com/collections/${subDirectory}/products.json?limit=1`
    )

    const data = await res.json()

    const availableProducts = data.products.filter(
      (product) => product.variants[0].available === true
    )

    return availableProducts
  } catch (error) {
    console.error("Error fetching data:", error)
    return [] // Important to avoid undefined returns
  }
}

And here is where that API function is called on my home page.

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { api } from '../api.js'

let products = ref([])

onMounted(async () => {
    let data = await api("hot-wheels-premium-collection")
    //console.log(data)

    products.value = data.map((item) => {
        let name = item.title.split("*")[0]
        let brand = item.title.split("*")[2]
        let link = `https://wheelcollectors.com/products/${item.handle}`
        
        return {
            brand: brand,
            name: name,
            price: parseFloat(item.variants[0].price),
            link: link
        }
    })
})
</script>

<template>
    <div class="container">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Brand</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Link</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(product, index) in products" :key="index">
                    <td>{{ product.brand }}</td>
                    <td>{{ product.name }}</td>
                    <td>${{ product.price.toFixed(2) }}</td>
                    <td><a :href="product.link" target="_blank">View Product</a></td>
                </tr>
            </tbody>          
        </table>
    </div>
</template>