vue3中使用hooks时的时候 传参无法监听到变化

示例代码：

组件代码

import { watch } from "@vue/composition-api";
import useFoo from "../hooks/useFoo.js";

export default {
  name: "HelloWorld",
  props: ["count1"],
  setup(props) {
    watch(() => {
      //will print when props.count1 changed
      console.log("Test1 Count1", props.count1);
    });
    const { foo } = useFoo(props.count1);
    return {
      foo
    };
  }
};

hooks代码：

import { watch, ref } from "@vue/composition-api";

export default function(count1) {
  const foo = ref(2);
  watch(()=>count1,() => {
    //will not print when props.count1 changed
    console.log("useFoo count1", count1);
  });
  return {
    foo
  };
}

代码是copy网上的，我遇到的问题和这个是差不多的，最终的解决方案是一样的，就是在hooks文件里我没办法监听到count1的变化，因为父组件传递到子组件，然后再从子组件转到hooks,丢失了响应式的功能，加上toRefs可以重新变化响应式传到hooks上。

toRefs函数的作用是将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象，并且值是关联的。在这个过程中toRefs会做以下两件事：

把一个响应式对象转换成普通对象
对该普通对象的每个属性都做一次ref操作，这样每个属性都是响应式的
说明：
reactive 对象取出的所有属性值都是非响应式的，而利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性。
reactive的响应式功能是赋值给对象，如果展开对象，会让数丢失响应的能力
使用toRefs可以保证对象展开的每个属性都是响应式的
 

最后到github上提了issue，其实只要在组件传参的时候，加上toRefs即可

import { watch } from "@vue/composition-api";
import useFoo from "../hooks/useFoo.js";
import {toRefs} from 'vue'

export default {
  name: "HelloWorld",
  props: ["count1"],
  setup(props) {
    watch(() => {
      //will print when props.count1 changed
      console.log("Test1 Count1", props.count1);
    });
    const { foo } = useFoo(toRefs(props).count1);
    return {
      foo
    };
  }
};