reactivity disappears after the object was in the array - vue.js

Question

Why, after passing through the reactive array, did the element's reactive property turn into a non-reactive one? Can you explain please.
<script setup lang="ts">
import { ref, Ref } from 'vue'
interface Obj {
a: number;
r: Ref<{s:string}>;
}
const obj: Obj = { a: 1, r: ref<string>({s:"one"}) }; //create an instance
const valBeforeArr=obj.r.value //the variable is displayed as it should be
//put an instance in a reactive array, and get from it
const arr = ref<Obj[]>([]);
arr.value.push(obj)
const valAfterArrRef=arr.value[0].r.value //reference value missing
const valAfterArrNonRef=arr.value[0].r //and the original value is displayed normally
</script>
<template>
<h2>valBeforeArr: {{ valBeforeArr }}</h2>
<h2>valAfterArrRef: {{ valAfterArrRef ?? 'underfined' }}</h2>
<h2>valAfterArrNonRef: {{ valAfterArrNonRef ?? 'underfined' }}</h2>
</template>
playground
As explained to me
Estus Flask, reactivity has not disappeared. You can verify this with the following code:
<template>
<h2>valBeforeArr: {{ valBeforeArr }}</h2>
<h2>valAfterArrRef: {{ valAfterArrRef ?? 'underfined' }}</h2>
<h2>valAfterArrNonRef: {{ valAfterArrNonRef ?? 'underfined' }}</h2>
<button #click="obj.r.value.s='seven'">updateBeforeArr</button>
<button #click="arr[0].r.s='five'">updateAfterArr</button>
</template>
But in one case you have to access using ".value", and in the other, without it. This is inconvenient, given that the object, in accordance with the business logic, can either pass through the array or not. How to access a property universally?

Answer 1

The documentation explains this:
When a ref is accessed or mutated as a property of a reactive object,
it automatically unwraps to the inner value so it behaves like a
normal property
<...>
Ref unwrapping only happens when nested inside a reactive Object.
There is no unwrapping performed when the ref is accessed from an
Array or a native collection type like Map
Since ref is deeply reactive, arr.value elements are reactive objects, and refs in obj properties are unwrapped when it's added to the array and becomes reactive.
shallowRef can be used in order to avoid unwrapping in nested refs.