Reactivity not triggering update #10046
Description
Vue version
3.4.6
Link to minimal reproduction
Steps to reproduce
I'm not entirely sure what the issue is, but this code worked in 3.3 and no longer works in 3.4.
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, triggerRef, computed } from 'vue'
const state = {
context: ref({ foo: 0 })
}
const internal = { context: { foo: 0 } }
function set(data): void {
// vue 3.3 it worked just fine, 3.4 is a no go?
Object.keys(data).forEach((key) => {
Reflect.set(internal.context, key, data[key])
})
console.log(`data: ${data.foo}, internal: ${internal.context.foo}, context: ${state.context.value.foo}`) // will log same numbers
state.context.value = internal.context // this is not triggering an update
triggerRef(state.context) // this is also not triggering an update
}
const context = computed(() => state.context.value)
let interval = null
onMounted(() => {
interval = setInterval(() => set({ foo: Math.floor(Math.random() * 10000) }), 1000)
})
onBeforeUnmount(() => {
if (interval) {
clearInterval(interval)
}
})
</script>
<template>
<div>context: {{ context.foo }}</div>
</template>The code example above shows that an update is not triggered when the state changes. I discovered a few things: if the ref is a const context = ref({ foo: 0 }) and is not nested in an object, an update gets triggered. And if I create a new object instead of mutating the original object it will fire an update. The state does change; you can see it in the log, but it is not reflected in the UI.
What is expected?
An update to be triggered when I change the state.
What is actually happening?
An update is not being triggered, the state is changing, but the update is not triggered .
System Info
System:
OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Memory: 53.92 GB / 62.71 GB
Container: Yes
Shell: 5.2.15 - /bin/bash
Binaries:
Node: 20.10.0 - /usr/local/share/nvm/versions/node/v20.10.0/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 10.2.3 - /usr/local/share/nvm/versions/node/v20.10.0/bin/npm
pnpm: 8.14.0 - /usr/local/share/nvm/versions/node/v20.10.0/bin/pnpm
npmPackages:
vue: ^3.4.5 => 3.4.6Any additional comments?
No response