Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNp9U81u1DAQfpXBl2ylJF4VJKQouxRxRkKoN8Ih3cyWQGJbtrOAopwrJM4IJE6IIydOaA/wMmhb3oJxfrbZVK1Pnt/vm/Hnmj1WKtxUyCIWWyxVkVpcJgIgXslSSYHCQpSbRcKekJ0w2ARnucjIVloqQw5O6TEf1ZJpVjpXFgzaSpEnp07aQg1SPJWVsJj5oHHtg8OoWjPDdS7QYXSYDay1LMEjat6+gQv3/pA7wzGnMEAiVlIYC5YSFq73zOoKjwZ3y5UCtcsFyM1zzE7xnY32DGazI1gsXT0VNYkg6qd5ibKyfaQtpXC4SYsKqdc6LQy6aRsfjufzOdXFvBt8yXzWUQ7KVIWvjRS037ZD0gdoc9FAJ2E0hrMT9spaZSLOK6HenIdEjp9QjGtaGrEJMlme3A+PwwcPeZYbO/aHaMrgTMu3BjUhJswfNefk3KAONIoMNeo7wSa5B4CT2A1Qh0nba2gBw/vcUBZpy6iUFueu7kTGvi+QJNXvYzgrWUgddY8X7t/sMOcReBqzVgPXJwLvXCOKkbvpuAH0FCYyqOspDDQNqWpIje8FAVz9+fLv4uPu8+/L79u/v7Zwuf129eFnJwTYfbrYff0BQTDMyN2Q079x68/o9P+s1emh9qcaHmXOXnh7vt7LAwE2/wGdLk8Y

Steps to reproduce

动态组件传入 computed 属性解析出现问题，可以在上面的地址中看到：

1. 刚进入页面时，应当显示红色的 isRedText: true 的文本。
2. 2s 后页面将显示红色的 isRedText: false

What is expected?

预期 2s 后的行为应该是绿色的 isRedText: false

What is actually happening?

mustache 语法中正确地移除了 ref，但属性判断中并没有。

我暂时没有找到相似问题。 我不知道这是不是一个问题，或者是我的用法有误，希望可以解惑，谢谢🙏。

System Info

No response

Any additional comments?

在页面中需要添加几个相似组件，使用 v-for + 动态组件完成，但是在改变这些组件中的值的时候，遇到了这个问题

你应该是将props弄成响应式 而不是里面的值弄成响应式

<template>
  <component :is="Comp" v-bind="props" />
</template>

<script setup>
import { onMounted, ref, computed, defineComponent } from 'vue'
import Comp from './Comp.vue'
  
const tmp = ref(true)
const props = computed(()=>{
  return {
    isRedText:tmp.value
  }
})
setTimeout(() => {
  tmp.value = false
}, 2000)
</script>

这样就可以了

你应该是将props弄成响应式 而不是里面的值弄成响应式

<template>
  <component :is="Comp" v-bind="props" />
</template>

<script setup>
import { onMounted, ref, computed, defineComponent } from 'vue'
import Comp from './Comp.vue'
  
const tmp = ref(true)
const props = computed(()=>{
  return {
    isRedText:tmp.value
  }
})
setTimeout(() => {
  tmp.value = false
}, 2000)
</script>

这样就可以了

谢谢 这样可以使用了。 但我想知道这个行为是一个问题吗

你应该是将props弄成响应式 而不是里面的值弄成响应式

<template>
  <component :is="Comp" v-bind="props" />
</template>

<script setup>
import { onMounted, ref, computed, defineComponent } from 'vue'
import Comp from './Comp.vue'
  
const tmp = ref(true)
const props = computed(()=>{
  return {
    isRedText:tmp.value
  }
})
setTimeout(() => {
  tmp.value = false
}, 2000)
</script>

这样就可以了

谢谢 这样可以使用了。 但我想知道这个行为是一个问题吗

你这样的行为没什么问题，只是需要注意一下取值。

<template>
  <component :is="Comp" v-bind="props" />
</template>

<script setup>
import { onMounted, ref, computed, defineComponent } from 'vue'
import Comp from './Comp.vue'
  
const tmp = ref(true)
const props = {
    isRedText: computed(() => tmp.value) // 加上.value即可
}
setTimeout(() => {
  tmp.value = false

}, 2000)
</script>