composition api set object value not trigger effect

This issue has been tracked since 2022-09-01.

Version

2.7.10

Reproduction link

codesandbox.io

Steps to reproduce

code like this, when use composotion api set to add new property, computed the new property not return value, and same as watchEffect.
it works in vue3.

Vue does not allow dynamically adding new root-level reactive properties to an already created instance,Is this the reason?

<script>
import { reactive, computed, watchEffect, set } from "vue";

export default {
  name: "TestA",
  setup() {
    const store = reactive({});

    watchEffect(() => console.log(store?.a));
    const getA = computed(() => store?.a);
    const setA = () => set(store, "a", Math.random());

    const storeB = reactive({
      b: 1,
    });
    const getB = computed(() => storeB.b);
    const setB = () => storeB.b++;
    return {
      setA,
      getA,
      store,
      setB,
      getB,
      storeB,
    };
  },
};
</script>

<template>
  <div>
    <div>A: {{ getA }}</div>
    <div>Hello World {{ store.a }}</div>
    <button @click="setA">test</button>

    <div>B: {{ getB }}</div>
    <div>Hello World {{ storeB.b }}</div>
    <button @click="setB">test</button>
  </div>
</template>

What is expected?

composition api set new property can trigger exists effect

What is actually happening?

only exists property work in effect, set property to object not working

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-03
Star Count 199758
Watcher Count 6095
Fork Count 32874
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date