Vue.js 3 vs Vue.js 2 reactivity differences on simple example

I have a project which i'm migrating from Vue2 to Vue3. I came upon this issue with dynamic changes to objects not reflecting in the template.

For example, i have this class TestClass which has a number property duration. In the constructor I'm incrementing this duration every second. This is the class:

export default class TestClass {
  constructor(data) {
    this.name = data.name;
    this.duration = data.duration;

    setInterval(() => {
      ++this.duration;
    }, 1000);
  }
}

This is supposed to start the timer once the class is created with constructor call. However I don't see any changes when I use the class in a component, except from the initial setting of value.
This is my TestComponent in which I use the TestClass:

 export default {
  name: "TestComponent",
  data() {
    return {
      testObject: new TestClass({ name: "Test Class", duration: 5 }),
    };
  },
  computed: {
    time() {
      return this.testObject.duration;
    },
  },
};
<template>
  <span> Class time: {{ time }}</span>
</template>

In contrast to Vue2 where changes would be displayed in the template, in Vue3 it always stays on inital value (this case 5). My question is, how to achieve same behavior as in Vue2 for this case? I'm aware that there are changes to reactivity between 2 and 3.

You need to use ref() or reactive() functions to create reactivity. And forget about OOP in Vue 3. Well, option API is still working, but you have to remember that data() values works like ref() to achieve reactivity you need to every time assign new value to each variable in data() function. In your code, you do it once, and then change inner object values that are not reactive.

Here is an example how to do it in Composition API.

Composable closure function composable/timer.js

export function useTimer(data) {
   const name = ref(data.name)
   const duration = ref(data.duration)
   
   setInterval(() => {
      ++duration.value;
    }, 1000);

   return {name, duration}
}

Component

<script setup>
const { name, duration } = useTimer(data)
</script>
<template>
  <span> Closure function {{ name }} time: {{ duration }}</span>
</template>

In Vue 3, reactive variables are wrapped in a Proxy object. testObject then does not contain the TestClass instance, it is a proxy of that instance.

Incrementing duration happens inside the object, not through the proxy so no reactivity change is detected. I would personally go the composable route with Composition API as noted in the other answer, but if you want to stay with Options API a workaround would be to move the asychronous action outside of the constructor (which is an antipattern anyways) and call the setInterval function from the component's created hook.

export default class TestClass {
  constructor(data) {
    this.name = data.name;
    this.duration = data.duration;
  }
  init() {
    setInterval(() => {
      ++this.duration;
    }, 1000);
  }
}

export default {
  name: 'Test',
  data() {
    return {
      testObject: new TestClass({ name: 'Test Class', duration: 5 })
    };
  },
  computed: {
    time() {
      return this.testObject.duration;
    }
  },
  created() {
    this.testObject.init();
  }
};