Failed to add a reactive to the instance object

[virtueDe]

Vue version

The last version

Link to minimal reproduction

https://play.vuejs.org/#eNp9UstuwjAQ/JWVLwQJhfRxogGpDw700FYt6smXKBgwdWzL3gBSlH/vxsGUQ0UUJfbs7O7M2g17tDbd14JNWO5LJy2CF1jbGdeyssYhNODEGlpYO1PBgKgDrrkuVeE9fEtxgIZrQFkJmEL2QGsojfbo6hKNS4YhTA9upU+p9JKYybDD2u5zRiKPgIVG4faFSgidzmLgVOLUSVPjlwIpMd1cFqWyI7jNsiy2oDfoAY9Ep0xyk3TZnfZkSLR83Bsny7RBUVlFTNoB5Nub8CdZIbtp+kWvom3zcSDk44ssNmLoqeVabtKdN5omGxxwVprKSiXcu0VJkjibRG+cFUqZw2vAaHRiFPFyK8qff/CdP3YYZx9OeJqW4Owcw8LRTPrw/OtNHGl9DlZmVStiXwl+Cm9U3WnsaU+1XpHsC15Quwj3Q+rN0s+PKLSPpjqhYfqBzxndmecr1v/k3qX38dRY+wsWAtll

Steps to reproduce

For example, the code for a playground

What is expected?

Instantiated objects can be reactive

What is actually happening?

I'm a beginner to vue3 and when I use other classes, I want to be able to respond to instance object properties; When I'm adding another reactive variable, the view changes together, which is very confusing, as shown below.
https://play.vuejs.org/#eNp9kl1rwjAUhv/KITerIFXZrlwV9uGFu9jGJrsKjFKjxrVJSFIVSv/7TtKmdjAtpU3e8yTnPSepyINS8aFkZEoSk2muLBhmSzWnghdKagsVaLaBGjZaFnCD6A0VVGR5agx8cXaEigqwvGAwg/E9jiGTwlhdZlbqaODD+NgdNzFuvUIyGjitdp9OCRwKS2GZPqR5hOpsHgLtFm0mgYmfU4sL421/U9x2CJPxeBxS4Ov9gLGI40qsJnKrnfdogFgAvvuEW3/BSsPFqJaXnZxdJKOmr9hRnFhWqBxpnAEku4n/Y9U+dVU1g6bIuk5GHfAXb60i3446Nhn1MpAhsQaL2/BtvDdS4CH7CijJZKF4zvSbshyLp2Qa2kxJmufy+OI1PEU2DHq2Y9nPP/renJxGybtmBrvFKOliNtXYlCa8+HxlJxx3wUKuyxzpK8EPZmReOo8N9liKNdrucd7t0l9VLrYrszhZJkwoyhn1F8HzlOD1fbpS+tnubXwXLhCpfwEicgWs

System Info

No response

Any additional comments?

No response

[virtueDe]

<script setup>
import { ref } from 'vue'

class View {
 time = 0;
  constructor() {
    this.setTime()
  }
  setTime() {
    setInterval(() => {
      this.time = new Date().getTime()
    }, 2000)
  }
}
const state = ref(new View())
</script>

<template>
  <h1>
    state {{ state.time }}</h1>
</template>

make state.time responsive

[jh-leong]

In case 1: The this.xxx executed in the constructor updates the state of the raw object, which doesn't trigger an effect. You need to modify the state through the proxy returned by ref. See this playground

In case 2: The second ref triggers an effect. When the component updates, it triggers a get on the first ref proxy, retrieving the value from the raw object.

[virtueDe]

@jh-leong bro, thank you for your answer, I'm using a third-party library and I can't modify the state using the returned proxy at the moment

[jh-leong]

This behavior is expected. Perhaps you could join the discussion to provide more information and explore specific solutions?

[virtueDe]

@jh-leong is that I shouldn't use it that way? Is it my usage that is wrong? I doubt myself