Version

3.2.31

Reproduction link

codepen.io/xia-2/pen/RwjvMNX

Steps to reproduce

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <p>It maybe a bug. When computed in a array, return a stirng.</p>
    <p>Double quotes be rendered surprisingly.</p>
    <div>{{ arr1[0] }}</div>   
    <!--  "some thing"    -->
    <div>{{ arr2[0] }}</div> 
    <!--   "some thing"   -->
    <div>{{ a }}</div> 
    <!--   some thing   -->
  </div>
</template>

<script setup>
import {computed,reactive} from "vue"
 
const arr1 = [
  computed(()=> "some thing")
]

const arr2 = reactive([
  computed(()=> "some thing")
])
  
let a = computed(()=> "some thing")

</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  font-size: 60px;
}
</style>

What is expected?

render the string with no quotes.

What is actually happening?

render with double quotes.

I write a simple demo on codepen. This is the link: https://codepen.io/xia-2/pen/RwjvMNX

plain objects and arrays are not unwrapped in templates. so to get the computed's value, you have to actually do this:

{{ arr[0].value }}

currently, you print the whole computed object, which will be run through JSON.stringify(), which is why you end up with the quotes.

More info https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods