beforeUpdated directive hook is called as a reactive effect, which is unexpected

[0x009922]

Version

3.0.11

Reproduction link

https://codepen.io/liquid-solid/pen/LYxoKEN

Steps to reproduce

• Open repro link
• Open console
• Click somewhere on bordered element
• Watch console logs

What is expected?

It is expected that if a callback modifies some reactive data that does not affect rendering, it should be called once.

What is actually happening?

Actually, callback falls into recursive reactive effect loop. Also, in the local dev server (via vite) appears vue message "Error: Maximum recursive updates exceeded..."

---

Everything works fine with updated hook.
Context of my bug - i need to update reactive info about element scrollTop/scrollHeight/offsetHeight, which not directly affects render function, and i tried to update it in the beforeUpdated directive hook.