title: Vue 3 reactivity not triggered from inside a class instance
body: <p>Codepen: <a href="https://codepen.io/codingkiwi_/pen/XWMBRpW" rel="noreferrer">https://codepen.io/codingkiwi_/pen/XWMBRpW</a></p>
  <p>Lets say you have a class:</p>
  <pre class="lang-js prettyprint-override"><code>class MyClass {
    constructor(){
      this.entries = [&quot;a&quot;];
  
      //=== example change triggered from INSIDE the class ===
      setTimeout(() =&gt; {
        this.entries.push(&quot;c&quot;);
      }, 1000);
    }
  }
  </code></pre>
  <p>And in a component you get an instance of that class:</p>
  <pre class="lang-js prettyprint-override"><code>const { reactive } = Vue;
  
  const App = {
    setup() {
      const myobject = reactive(new MyClass());
  
      //=== example change triggered from OUTSIDE the class ===
      setTimeout(() =&gt; {
        myobject.entries.push(&quot;b&quot;);
      }, 500);
      
      return {
        myobject
      };
    }
  }
  </code></pre>
  <p>The myobject.entries array in the DOM will display the entries <code>&quot;a&quot;</code> and <code>&quot;b&quot;</code>, but not <code>&quot;c&quot;</code></p>