props update 比较时 出现的两个问题

import { h, ref } from "mini-vue.esm-bundler.js";
export const App = {
  name: "APP",
  render() {
    return h("div", { id: "root", ...this.props }, [
      h(
        "button",
        {
          onClick: this.change1,
        },
        "修改值修改"
      ),
    ]);
  },
  setup() {
    const props = ref({a:10});
    const change1 = () => {
      props.value.foo = "new foo";
    };
    return {
      change1,
      props,
    };
  },
};

点击按钮时
error:  dep is not iterable (cannot read property undefined)


Q2:
import { h, ref } from "mini-vue.esm-bundler.js";
export const App = {
  name: "APP",
  render() {
    return h("div", { id: "root", ...this.props }, [
      h(
        "button",
        {
          onClick: this.change1,
        },
        "修改值修改"
      ),
    ]);
  },
  setup() {
    const props = ref({ });
    const change1 = () => {
      props.value.foo = "new foo";
    };
    return {
      change1,
      props,
    };
  },
};

点击修改时更改的按钮
这时候 按理说 props 改变了 视图应该更新，但因为 之前没有收集到依赖，视图没有重新渲染