Missleading rendering: Ref or computed inside non-wrappable variables (objects, arrays) which returns a string

[Rolanddoda]

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

I know that refs or computed-s inside objects and arrays don't get unwrapped in the templates.
And that's exactly the issue with the code below:

<script setup>
import { computed, ref } from "vue";

const computedInsideArray = [computed(() => "text")];
const refInsideObject = { val: ref("text") };
</script>

<template>
  <div>{{ computedInsideArray[0] }}</div> <!-- "text" >
  <div>{{ refInsideObject.val }}</div> <!-- "text" >
</template>

The solution is to just use .value

What is expected?

Since accessed element is an object which contains a .value property, an object should be rendered:

{ "value": "text" }

What is actually happening?

"text" (with quotes) is rendered.

---

In many cases, it can be easy to forget or miss adding .value. And if that happens when a string is returned inside a computed or a ref inside an object or array, it might be difficult to debug since you are going to see the string you want, but inside quotes. And intuitively you might think this is a bug or an issue related to the quotes.

[LinusBorg]

the current behavior was explicitly added here:

f994b97

So we will have to discuss if and if so, when/how we want to change this, and how people that may as of now rely on this, would be affected.