Docs say: object contains nested refs, they will be deeply unwrapped. But it's not...

[niceplugin]

ref() Docs explain:

The ref object is mutable - i.e. you can assign new values to .value. It is also reactive - i.e. any read operations to .value is tracked, and write operations will trigger associated effects.

If an object is assigned as a ref's value, the object is made deeply reactive with reactive(). This also means if the object contains nested refs, they will be deeply unwrapped.

To avoid the deep conversion, use shallowRef() instead.

But my test code didn't work that way. It's still deeply wrapped.

My test code:

<template>
  <!-- It is reactively update innerHTML content. -->
  <p>{{ obj }}</p>
  <button @click="test">TEST</button>
</template>

<script setup>
import { ref } from 'vue'

const obj = ref({
  a: 1,
  b: {
    c: ref({ // contains nested ref
      d: {
        e: 5
      }
    })
  }
})

function test() {
  obj.value.b.c.d.e++
}
</script>

I am very confused right now. What am I misunderstanding?

[niceplugin]

I was misunderstanding the meaning of the word as follows:

unwrap: Stop reactive tracking.

Now what I know is:

unwrap: ref uses .value to retrieve a value, but now allows I to use it without .value.

I wanted to delete this discussion, but I couldn't, so I'm closing it with a self-response.
Sorry for the confusion.