Common problems with reactivity

This is an umbrella issue, intended to gather examples of common problems, mistakes and misunderstandings when using the proxy-based reactivity system. The objective is to gather source material that might be used to add a new page to the documentation, or enhance the existing pages.

The idea is that it will be something similar to the Reactivity Caveats for Vue 2. However, I'm keen for the scope to be quite broad at this stage and we can decide what is actually worth documenting later. Anything related to reactivity that might catch out a beginner is in scope for now, even if it is already documented. That includes examples of things that do work but where it isn't necessarily obvious why they work. These can cause just as much confusion as scenarios that don't work correctly.

While most reactivity problems can be reduced down to 'you need to go through the proxy', I think there are plenty of cases where it isn't immediately obvious how that applies, especially for newcomers. My hope is that documenting some of these edge cases will save people from having to learn about them the hard way, while also giving them a deeper understanding of how reactivity works.

I've outlined various example below. If anyone has more to add, please do. Anything else that might help us to document the problems I've already described would also be welcome.

Start by reviewing the existing reactivity documentation and the Vue 2 Reactivity Caveats page mentioned in the issue. Collect beginner-facing examples of proxy-based reactivity problems and misunderstandings, then determine which examples are suitable for a new documentation page or additions to existing pages.