Docs: 04-updating-arrays-and-objects

Ensured clarity in the example code by defining theobj object. This ensures that readers understand the context and structure of the object being modified in the reactivity example.

Because it is possible to trigger reactivity by referencingfoo.bar in the template instead ofobj.foo.bar, the following will trigger reactivity:

<script>letobj={foo:{bar:'old'}};constfoo=obj.foo;functionupdateFooBar(){foo.bar='baz';}</script><buttonon:click={updateFooBar}>Update foobar</button><!-- referencing the variable with `foo.bar` - triggers reactivity --><p>baz is: {foo.bar}</p>

However, the next example will not, and will requireobj = obj reassignment:

<script>letobj={foo:{bar:'old'}};constfoo=obj.foo;functionupdateFooBar(){foo.bar='baz';// uncomment below to trigger reactivity// obj = obj}</script><buttonon:click={updateFooBar}>Update foobar</button><!-- referencing the variable with `obj.foo.bar` - does **not** trigger reactivity --><p>baz is: {obj.foo.bar}</p>

In this case,{obj.foo.bar} does not trigger reactivity whenfoo.bar is updated, unlessobj is reassigned (withobj = obj).

By including the definition of theobj object, we aim to elucidate the structure and context in which the reactivity example operates, ensuring a clearer understanding for the reader.