Allow more control over behavior of reactive effect when triggered

[visceroid]

I've come across this use case and couldn't find a way to implement it in Vue:

1. An expensive or long (but synchronized) computation logic that involves a lot of reactive data;
2. The reactive dependencies themselves are relatively simple, but their values change frequently, thus triggering the expensive logic to recompute;
3. I want to run the computation asynchronously (and of course lazily), while maintaining the ability to track and collect dependencies during the process;
4. When one of the dependencies changes, instead of rerunning immediately, I want to add debouncing to it, so that after the changes settled down the computation can start, without lagging or interrupting user input;
5. And I want to do it at a single checkpoint, preferably before the computed getter or watch callback (of the expensive computation) is called, instead of manually collecting all of the dependencies used, converting them to debounced variants (that need to be tied to a common debounce timer), and losing any reusability, not to mention from business logic's point of view, which dependencies are involved may change over time and that requires the programmer to set up debouncing for future changes as well;
6. If the above can be achieved, I want it to expose an ref to track if the computation is underway.

For async operations, Vue does dependency tracking only for the first call stack, so that's a problem for no.3. I managed to do it by wrapping another watchEffect around the expensive function in the later call stacks (the asynchronous part), using a construct much like how @vueuse implements computedAsync. The next time this inner watchEffect triggers it will stop itself, and trigger the outer watchEffect, setting up async computing through the same process.

function computedAsyncWithWatch(expensiveFn, initialState, lazy) {
    const started = ref(!lazy);
    const current = ref(initialState);
    const dirty = ref();
    watchEffect(async () => {
        if(!started.value)
            return;
        await dirty.value;
        let compute = true;
        const stop = watchEffect(() => {
            if (compute) {
                let value = expensiveFn();
                Promise.resolve().then(() => {
                    current.value = value;
                });
                compute = false;
            } else {
                Promise.resolve().then(() => {
                    current.value = initialState;
                    triggerRef(dirty);
                    stop();
                });
            }
        });
    });
    if (lazy) {
        return computed(() => {
            started.value = true;
            return current.value;
        });
    } else {
        return current;
    }
}

However, no.4 is hard to implement, mainly because Vue does tracking along with the actual computing, and there's no way I know of that can maintain dependencies (from previous run) without running the expensive logic again (and touching the dependencies). For debouncing, I need the dependency changes to keep triggering the effect, notifying the debouncer of changes, but delay the rerun until no new change has arrived for some time.

I tried various methods, including letting the triggered runs await on a promise, then resolve the promise in the debounced callback, they all won't work, because it only tracks the first call stack before await, and you either do nothing - lose all dependencies, or dive into the expensiveFn - no debouncing. In short, when the effect triggers, the only way to keep/re-establish the dependencies is to (synchronously) run the expensiveFn again. The closest I can achieve is a fixed delay after the first trigger (ignoring subsequent triggers), then rerun.

I think that when triggering an effect, providing additional control over whether actual computing should run can separate the two aspects of reactive effects: track/trigger and computation better. The current onTrack and onTrigger callbacks are only for debugging and they don't affect how the effect actually runs and tracks dependencies.

Or is this actually doable with current Vue? Would appreciate ideas, thanks.