composition api set object value not trigger effect

[Zeral-Zhang]

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