`computed` variant which is not recomputed unless some condition is true (or explicitly told so)

Clear and concise description of the problem

In many cases it is desirable to only show consistent UIs to the user. However, when parts of the UI depend on async state, it becomes hard to ensure they are shown simultaneously. E.g. two fetch calls which retrieve some data may return and different points in time.

Another one would be postponing updates to some component until a transition finished.

Suggested solution

Introduce a helper that could be used like the following:

const { data: foo, isFinished: fooIsFinished } = useFetch(fooUrl)
const { data: bar, isFinished: barIsFinished } = useFetch(barUrl)
const val = computedGates(() => foo.concat(bar), () => fooIsFinished && barIsFinished)

Alternative

Alternatively, something similar to watch could be used with pause/resume/force handlers:

const { data, pause, resume, force } = computedGates(() => foo.concat(bar))
watch(
    () => fooIsFinished && barIsFinished,
    (bothFinished) => {
        if (bothFinished) resume()
        else pause()
    }
)

...

<TransitionGroup
    @before-enter="force()"
    @before-leave="force()"
>

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.