Vue3如何监听外部数组响应性？Vue2迁移兼容问题

在将Vue2应用迁移至Vue3时遇到了问题：如何让Vue3监听“外部”数组的变化？

此前在Vue2中可以正常运行的代码，到Vue3里失效了：

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

<script>
    var numbers = [1,2,3]; // 这是外部数组

    var app = Vue.createApp({
        data() { return { dataArray : numbers } } // 将Vue绑定到外部数组
    }).mount("#list");

    numbers.push(4); // UI没有更新，但在Vue2里可正常生效
</script>

目前已知可以通过调用app.dataArray.push或者$forceUpdate这类方法解决，但能否让Vue直接监控这个已有的外部数组？更宽泛的问题是：如何将Vue3绑定到任意普通JS对象？这类对象可能结构复杂，或者来自不受控的外部API，在Vue2或Angular中这类操作十分简单。

更新：根据@Dimava的回答，最简解决方案如下：

var numbers = [1,2,3]; // 来自API的外部数组
numbers = Vue.shallowReactive(numbers); // 转换为响应式代理

内容的提问来源于stack exchange，提问作者Alex from Jitbit