refactor: don't run components in detached effectScopes

[ferferga]

For some reason I couldn't find documentation for, each component's effect scope runs detached, so every effect component has its own effect scope. In my opinion, this doesn't make sense:

• Everything in Vue works like a tree:
  • Every component (except root) descends from a parent
  • provide/inject

Hence, it doesn't make any sense that I'm not able to walk the effectScope of components in the same way.

This Pull Request makes every component's effect scope scoped to the parent's component effect scope, instead of being detached. Only the root component runs in a detached effect scope to take into account cases like:

onMounted(() => {
  const newApp = createApp(Blah)
  newApp.mount('#popup')
})

The effectScope of components being a tree as well allows, among other things:

• Pausing/resuming the effect scope of some sections of the app (the most notable case at #13304)
• A potential simplification to the component's teardown process (perhaps onUnmounted can internally be passed to onScopeDispose, instead of being different hooks to reduce duplications?).

Additional notes

Although all tests are passing, there's one component in my application that it's currently not reacting to changes in computed properties with this change (here's a reproduction). I believe it's caused due to computeds being created outside the effect scope of the component (not at setup), but I'm still investigating. Hopefully, ecosystem-ci tests can shed more light into this issue, but any advice in the meantime is appreciated.