title: Getting an updated array to update in a Vue3 template
body: <p>While this is not the exact code, it represents the issue. I have an object that has a method that returns an array. This array is then updated asynchronously. In the demo it is a timeout but in reality it would be an HTTP call:</p>
  <pre><code>function () {
   let a = ['apple'];
  
   setTimeout(() =&gt; {
     a.push['banana'];
   }, 3000);
  
   return a;
  }
  </code></pre>
  <p>Then it is included in a Vue component via a computed property and displayed, e.g.</p>
  <pre><code>   &lt;ul&gt;
        &lt;li v-for=&quot;(row, index) in testObjectArr&quot; v-bind:key=&quot;index&quot;&gt;
           {{row}}
        &lt;/li&gt;
     &lt;/ul&gt;
  </code></pre>
  <p>However this only displays the first entry (apple) and not the second (banana). If an event does cause the template to refresh then it does appear.
  Using things like <code>watch</code> also doesn't work. The only way to get it working is to pass a handler in to the object that manually triggers a redraw which is oviously less than ideal.
  Is there any way to get responsivity to actually work with the above situation?</p>