title: reactivity disappears after the object was in the array
body: <p>Why, after passing through the reactive array, did the element's reactive property turn into a non-reactive one? Can you explain please.</p>
  <pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
      import { ref, Ref } from 'vue'
      
      interface Obj { 
        a: number;
        r: Ref&lt;{s:string}&gt;;
      }
      const obj: Obj = { a: 1, r: ref&lt;string&gt;({s:&quot;one&quot;}) }; //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&lt;Obj[]&gt;([]);
      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
      &lt;/script&gt;
      
      &lt;template&gt;
        &lt;h2&gt;valBeforeArr: {{ valBeforeArr }}&lt;/h2&gt;
        &lt;h2&gt;valAfterArrRef: {{ valAfterArrRef ?? 'underfined' }}&lt;/h2&gt;
        &lt;h2&gt;valAfterArrNonRef: {{ valAfterArrNonRef ?? 'underfined' }}&lt;/h2&gt;
      &lt;/template&gt;
  </code></pre>
  <p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgUmVmIH0gZnJvbSAndnVlJ1xuXG5pbnRlcmZhY2UgT2JqIHtcbiAgYTogbnVtYmVyO1xuICByOiBSZWY8e3M6c3RyaW5nfT47XG59XG5jb25zdCBvYmo6IE9iaiA9IHsgYTogMSwgcjogcmVmPHN0cmluZz4oe3M6XCJvbmVcIn0pIH07XG5jb25zdCB2YWxCZWZvcmVBcnI9b2JqLnIudmFsdWUgIFxuY29uc3QgYXJyID0gcmVmPE9ialtdPihbXSk7XG5hcnIudmFsdWUucHVzaChvYmopICBcbmNvbnN0IHZhbEFmdGVyQXJyUmVmPWFyci52YWx1ZVswXS5yLnZhbHVlXG5jb25zdCB2YWxBZnRlckFyck5vblJlZj1hcnIudmFsdWVbMF0uclxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgyPnZhbEJlZm9yZUFycjoge3sgdmFsQmVmb3JlQXJyIH19PC9oMj5cbiAgPGgyPnZhbEFmdGVyQXJyUmVmOiB7eyB2YWxBZnRlckFyclJlZiA/PyAndW5kZXJmaW5lZCcgfX08L2gyPlxuICA8aDI+dmFsQWZ0ZXJBcnJOb25SZWY6IHt7IHZhbEFmdGVyQXJyTm9uUmVmID8/ICd1bmRlcmZpbmVkJyB9fTwvaDI+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==" rel="nofollow noreferrer">playground</a></p>
  <p>As explained to me
  Estus Flask, reactivity has not disappeared. You can verify this with the following code:</p>
  <pre><code>&lt;template&gt;
    &lt;h2&gt;valBeforeArr: {{ valBeforeArr }}&lt;/h2&gt;
    &lt;h2&gt;valAfterArrRef: {{ valAfterArrRef ?? 'underfined' }}&lt;/h2&gt;
    &lt;h2&gt;valAfterArrNonRef: {{ valAfterArrNonRef ?? 'underfined' }}&lt;/h2&gt;
    &lt;button @click=&quot;obj.r.value.s='seven'&quot;&gt;updateBeforeArr&lt;/button&gt;
    &lt;button @click=&quot;arr[0].r.s='five'&quot;&gt;updateAfterArr&lt;/button&gt;
  &lt;/template&gt;
  </code></pre>
  <p>But in one case you have to access using &quot;.value&quot;, 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?</p>