Version

3.0.11

Reproduction link

https://codesandbox.io/s/jolly-merkle-5q3ou?file=/src/App.vue

Steps to reproduce

<template>
  <div>{{ a }}</div>
  <button @click="() => a  "> </button>
</template>

<script>
import { reactive, toRefs, isReactive } from "vue";
export default {
  name: "App",
  setup() {
    const useState = () => reactive({ a: 1 });
    let state = useState();
    setTimeout(() => {
      state.a = 888;
    }, 2000);

    setTimeout(() => {
      state = useState();
      console.log(isReactive(state));
      state.a = 111;
    }, 10000);

    return {
      ...toRefs(state),
    };
  },
};
</script>

What is expected?

Can change the value

What is actually happening?

reactive cannot monitor changes

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

You are not explaining at all what is the result you expect.

By changing the variable state, you end up having two different reactive objects, one in your template. Use a ref to contain the state instead of a reactive if you plan on overriding the whole object.