How to update properties of a reactive object inside that object?

I’m trying to create a file uploader using a composable. My composable function has a queue array:

import { reactive, ref } from 'vue';
import Upload from '../src/upload';

export function useUploader() {
    let queue = ref<Upload[]>([]);

    let enqueue = (file: File) => queue.value.push(reactive(new Upload(file)));

    return {
        queue,
    };
};

I push an instance of my Upload class, wrapped in the reactive helper, to the queue. However, if I update properties inside the Upload class, those changes don’t seem to trigger an update in my UI. For example:

type UploadStatus = 'preparing' | 'progressing' | 'complete' | 'errored';

export default class Upload {
    public readonly file: File;
    public status: UploadStatus;

    constructor(file: File) {
        this.file = file;
        this.status = 'preparing';

        this.start();
    }

    private start() {
        this.status = 'progressing';
    }
}

When I update the status to progressing in the start method, it doesn’t trigger any update in my UI. I’m guessing because it’s a direct manipulation of that property, and not being proxied via Vue.

How can I get around this? How could I update properties in my Upload class and have those changes be reactive, so that changes update my Vue components?