在将现有应用程序从Vue 2移植到Vue 3时，我遇到了一个令人惊讶的问题。
如何让Vue 3监视“外部”数组的更改？

这在Vue 2中工作得很好，但在Vue 3中停止工作：

<ul id="list">
    <li v-for="t in dataArray"> {{t}} </li>
</ul>

<script>
    var numbers = [1,2,3]; //this is my external array

    var app = Vue.createApp({
        data() { return { dataArray : numbers } } //bind Vue to my external array
    }).mount("#list");

    numbers.push(4); //UI not updating, but worked fine in Vue2

</script>

我知道我可以调用app.dataArray.push，或者调用$forceUpdate，等等。但是有没有办法强制Vue只监视现有的数组呢？
我想更广泛的问题是：如何将Vue 3绑定到任意plain-JS对象？对象可能太复杂而无法重写，也可能来自我无法控制的外部API。这在Vue 2或Angular中是微不足道的（与任何普通对象的双向绑定，无论它是否是示例/组件的一部分）
P.S.这看起来像是Vue 3中一个巨大的突破性变化，在任何地方都没有提到。

更新：

根据@Dimava的回答，看起来修复上述代码的最不痛苦的方法是：

var numbers = [1,2,3]; //this is my external array
numbers = Vue.shallowReactive(numbers); //convert to a reactive proxy