Vue version

3.1.0

Link to minimal reproduction

https://codesandbox.io/s/functional-components-2dx1s6

Steps to reproduce

1. Open console
2. Press "toggle" button

What is expected?

Component's onUpdated doesn't wait for onUpdated of its children if they are functional. I think, the changing component's state is enough to fire its onUpdated.

What is actually happening?

According to the doc, a parent component's updated hook is called after that of its child components. Yeah, I agree with this. But functional components don't have state, hooks etc. But parent has)

System Info

No response

Any additional comments?

No response

This is not related to functional components, and it's expected behavior.

onUpdated runs whenever the component went trough another render cycle. But in your code, HelloWorldnever re-renders, because it's template/render function does not depend on isOpen. Since the value is only read on the slot that is being rendered in the child component, only that component needs to re-render.

This is a good thing in terms of performance because it means that we can skip an unnecessary render cycle of HelloWorld

if you want to run a side effect in HelloWorld when this isOpen changes, use watch()