Vue3.0 props是数组时,如何更新?

我测试了props为对象时,异步更新,子组件的响应没有问题,但是数组类型的更新却不成功。有人知道怎么做吗?
demo代码在这里

<div id="hello-vue" class="demo">
{{ message }}
<todo-item :todos="mylist" />
</div>

let mylist = Vue.reactive([
  { text: "init todo text" },
  { text: "init todo text2" },
  { text: "init todo text3" },
]);
Vue.onMounted(() => {
  console.log("main component");
  setTimeout(() => {
    console.log("2s later");
    mylist = [
      { text: "changed todo 2s" },
      { text: "changed todo 2s" },
      { text: "changed todo 2s" },
    ];
  }, 2000);
});

change Vue.reactive to Vue.ref

const HelloVueApp = {
  setup() {
    let message = Vue.ref("👋  Hello Vue!!");
    let mylist = Vue.ref([
      { text: "init todo text" },
      { text: "init todo text2" },
      { text: "init todo text3" },
    ]);
    const state = Vue.reactive({
      title: "",
      list: [],
    });
    Vue.onMounted(() => {
      console.log("main component");
      setTimeout(() => {
        console.log("2s later");
        mylist.value = [
          { text: "changed todo 2s" },
          { text: "changed todo 2s" },
          { text: "changed todo 2s" },
        ];
      }, 2000);
    });

    return {
      state,
      message,
      mylist,
    };
  },
};

感谢感谢, 测试成功。