[SOLVED] Why do we need to use `.value` inside a template for a function that returns computed ref

Why do we need to use `.value` inside a template for a function that returns computed ref

I have a function that returns a ComputedRef like below

// a computed ref function
const publishedBooksMessage = () => computed(() => {
  return books.length > 0 ? 'Yes' : 'No'
})

To access the value returned from this function inside the template, I have to access the value property returned by that function like below. Working Fiddle

<span>{{ publishedBooksMessage().value === 'Yes' ? 'YES' : 'No' }}</span>

But, if this was a computed property like below

// a computed ref
const publishedBooksMessage = computed(() => {
  return books.length > 0 ? 'Yes' : 'No'
})

I could simply access it with the property variable itself without accessing the value property of that variable like below. Working Fiddle

<span>{{ publishedBooksMessage === 'Yes' ? 'YES' : 'No' }}</span>

The return type of the first and second implementation are ComputedRef. Then why does the first implementation needs to check the value property of the return value, where as with second one its sufficient to just check with the variable name itself?

Solution

This principle of removing .value in template is called unwrapping, Based on official docs in the section Caveat when Unwrapping in Templates, they say :

Ref unwrapping in templates only applies if the ref is a top-level property in the template render context.

As this applies for nested ref properties it also applies on functions that return refs.