Vue version

3.2

Link to minimal reproduction

https://sfc.vuejs.org/#eNpdUMtugzAQ/JWVL4CUwN0FpH5Dj3UPBAxx6pdsQxtZ/veuQU2kXMA7Mzuzmkjera23lRNKWj86YQN4HlbbMy2UNS5AhNEouwY+QYLZGQUF6os3ppkejfYBHFLdQ1WWFXQ9lHE00jgKBdJFqipcOORS4KeDT8S/EGybIxcTcQhcWTkEjhNAO4kNqA93yTtGUM9IHyP+U4KPq1nlBBee49sGlc+V7TwbhxvlcgIx/VYg9J7KCNBvfkcG0Tz8Wy+78fK0HaQ3L9750sd15ESOes5qsPXNG40FxnwAeu+EZ4TCjmQMG8szI9cQrKdN4+cx137ztXFLg6/arToIxWvu1fnizI/nDo0ZyRaJ6UTSH/XDkzQ=

Steps to reproduce

<script setup>
import { computed } from 'vue';

const red = computed(() => ({color: 'red'}));
const list = [red];
</script>

<template>
  <div :style="red">{{red}} Should be red</div>
  <div v-for="(g, idx) in list" :key="idx" :style="g">{{g}} Should also be red</div>

</template>

What is expected?

Both lines should be in red color

What is actually happening?

Only the top row is red

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 6.07 GB / 15.86 GB
  Binaries:
    Node: 14.19.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.16 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 104.0.5112.101
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.63)
    Internet Explorer: 11.0.19041.1566

Any additional comments?

I tried to debug myself and it seems like patchStyle is enumerating over the proxy's keys, not the keys in the target. I'm not sure why. Thus, a workaround is to use :style="g.value" on the computed style instead of :style="g".

:style="g.value"

list is a non-reactive array, so refs inside of it are not unwrapped.