In my app I want to show files for different Items.
When item A is selected, it can take some time until it is loaded.
When in the meantime item B is selected, how can I stop the loading of item A?

Take this simplified example of my use case:

<script setup>
import { reactive } from 'vue'
const files = reactive([])

function load(item) {
  // reset files
  files.length = 0
  // simulate long running process with setTimeout
  setTimeout(() => {
    files.push(item)
  }, 5000)
}
</script>

<template>
  <button @click="load('A')">A</button>
  <button @click="load('B')">B</button>
  <pre>files: {{ files }}</pre>
</template>

When clicking the buttons A and B within less than 5seconds, the files list will show A and B eventually, but I want it to only show B.

My real use case is more complex and involves multiple state variables (not only files) and multiple Promises spawned in the background to populate these variables.

Any ideas on how this can be achieved?