Why field.value from reactive(useField('field') is not auto unwrapped in the template?

[ga676005]

I see this example at the bottom in the document https://vee-validate.logaretm.com/v4/guide/composition-api/caveats/#destructing-composable
I don't understand why do we need to unwrap field.value manually in the template.

<script setup>
import { reactive } from 'vue';
import { useField, useForm, useFieldArray } from 'vee-validate';
const form = reactive(useForm());
const field = reactive(useField('field'));
const fieldArray = reactive(useFieldArray('users'));
</script>
<template>
  <!-- ❌  Still Doesn't work because it is a writeable computed ref -->
  <input v-model="field.value" />
  <!-- ✅  Works if unwrapped manually -->
  <input v-model="field.value.value" />
  <!-- ✅  Works -->
  <pre>{{ form.meta.valid }}</pre>
  <!-- ✅  Works -->
  <div v-for="item in fieldArray.fields"></div>
</template>

I try to reproduce it and made an example myself, but my version is working. I made a function return a plain object that contains a property value which is a writable computed ref. I don't need to unwrap myField.value like myField.value.value in the template.

<script setup>
import { computed, reactive, ref } from 'vue'

function test() {
  const field = ref('')
  const value = computed({
    get() {
      return field.value
    },
    set(v) {
      field.value = v
    },
  })

  return { value }
}

const myField = reactive(test())
</script>
<template>
    <p>
      myField.value
      {{ myField.value }}
      <input v-model="myField.value" type="text">
    </p>
</template>

In the Vue 3 document, it says

The reactive conversion is "deep": it affects all nested properties. A reactive object also deeply unwraps any properties that are refs while maintaining reactivity.

I thought it means that after we transform an object with reactive(), all refs are unwrapped. I don't use reactive() on a daily basis, but I wonder if this behavior is something I should be aware of.

I found something interesting. If we make shallow copy of useField() then pass it to the reactive, then the computed ref is unwrapped automatically in the template.

<script setup>
import { reactive } from 'vue';
import { useField } from 'vee-validate';

// transform plain object from `useField()` to reactive 
const a = reactive(useField('a'))

// make a shallow copy of useField() before passing to `reactive()`
const b = reactive({ ...useField('b') })
</script>
<template>
    <!-- This doesn't work -->
    <p>
      {{ a.value }}
      <input v-model="a.value" type="text">
    </p>

    <!-- But this work!-->
    <p>
      {{ b.value }}
      <input v-model="b.value" type="text">
    </p>
</template>