Docs/playgrounds: change `ref(TresObject)` to `shallowRef(TresObject)`

[andretchen0]

Description

To nudge users and contributors to use shallowRef over ref, convert ref(TresObject) to shallowRef(TresObject) in the docs and playgrounds.

Context

According to the Vue docs:

shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.

https://vuejs.org/api/reactivity-advanced.html

TresObjects are "large data structures". Each one typically holds a reference to context, which contains scene, renderer, etc.

After a rough regex search for \bref\b, it appears that the Tres docs and playgrounds have 100+ occurrences of ref(TresObject). Many of those can be converted to shallowRef(TresObject) with no loss of intent/functionality.

Meta

Discussed among the core team on Discord

Suggested solution

Convert ref(TresObject) to shallowRef(TresObject) in the docs and playgrounds.

Alternative

Leave as is.

Additional context

No response

Validations

• [X] I agree to follow this project's Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alvarosabu]

Merged