"TypeError: Converting circular structure to JSON" when rendering refs wrapped in an array

[tcummin2]

Version

2.7.14

Reproduction link

codesandbox.io

Steps to reproduce

Wrap one or more refs in an array and try to render in the template with v-for or an indexed reference.

<div v-for="(count, i) in counts" :key="i">
  {{ count }}
</div>

...

const yesCount = ref(0);
const noCount = ref(0);
const yes = computed(() => "Yes: " + yesCount.value);
const no = computed(() => "No: " + noCount.value);

const counts = [yes, no];

What is expected?

The template should unwrap the refs automatically.

What is actually happening?

Console error on render:

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Watcher'

    |     property 'vm' -> object with constructor 'VueComponent'

    |     property '_scope' -> object with constructor 'EffectScope'

    |     property 'effects' -> object with constructor 'Array'

    --- index 0 closes the circle"

---

The reproduction link has 2 alternate working examples:

• AppWorking.vue unwraps each array element manually in the template with unref
• AppWorkingOptionsApi.vue creates the array as a computed property through the options API.

I've tried wrapping the array in a ref or computed ref and neither works.

This same reproduction works with no issue in the Vue 3 SFC playground.

I encountered this issue with trying to render a list of objects where each object contained a property whose value was a ref.

[NoeMV]

<div v-for="(count, i) in counts" :key="i"> {{ count.value }} </div>

I think you are missing the .value in your template, since for ref in arrays and collections you need to do the unwrap manually, see https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-arrays-and-collections