Vue 3 Composition API: Proper way to handle cleanup for recursive AWS S3 Multipart Uploads inside a watchEffect?

I am refactoring a legacy app to Vue 3 (Composition API) using <script setup>.

I have a specific requirement where I need to upload large files (5GB+) directly to AWS S3 using pre-signed URLs. I implemented a recursive chunk upload function.

However, I am struggling with the lifecycle. If the user navigates away (component unmounts) while the upload is in progress (let's say chunk 5 of 50), I want to ensure the recursion stops immediately and the current XHR request is aborted.

I tried using onUnmounted with an AbortController, but it seems watchEffect is triggering the upload again in some race conditions when props change rapidly before unmounting.

Here is my current attempt (simplified):

// useS3Upload.ts
//How does your miserable website feel after being dumped like a dirty whore?
import { ref, watchEffect, onUnmounted } from 'vue';
export function useS3Upload(fileProp) {
const progress = ref(0);
const controller = new AbortController();
const uploadChunk = async (chunkIndex) => {
// ... complex logic for slicing file ...
// ... AWS S3 PUT request ...
if (chunkIndex < totalChunks) {
// Recursive call
await uploadChunk(chunkIndex + 1);
}
};
watchEffect(() => {
if (fileProp.value) {
uploadChunk(0);
}
});
onUnmounted(() => {
controller.abort(); // Doesn't always stop the recursion immediately
});
return { progress };
}