Injecting component-state-driven CSS variables in v-for loop at fragment root level

[davidbernegger]

Version

3.0.0

Reproduction link

https://codesandbox.io/s/great-grothendieck-3zx5p?file=/src/App.vue

Steps to reproduce

When trying following code, the newly inserted nodes do not have the style attatched.

<template>
  <div
    v-for="(x, y, z) in object"
    :key="z"
    class="text"
    @click="addPropAndChangeColor"
  >
    {{ x }} 
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const object = reactive({
	firstProperty: 'This Has Color',
	SecondProperty: 'This Also Has color'
})

const color = ref('red')

const addPropAndChangeColor = function () {
	object[Math.random()] = 'Added Property does not have color'
	color.value = 'blue'
}

export {
	object,
	addPropAndChangeColor,
	color
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

if you wrap the v-for in a div so its not on the root the injection works.

<template>
<div>
  <div
    v-for="(x, y, z) in object"
    :key="z"
    class="text"
    @click="addPropAndChangeColor"
  >
    {{ x }} 
  </div>
</div>
</template>

What is expected?

Adding the styles to the node at the root should have styles

What is actually happening?

They do not have styles