  通过Vue.js 3实现增强的组合性和响应性。

给定以下在Vue.js 3中的组合式 'useNumbers.js'，我希望组件中的 'numbers' 具有响应性。但是，在一个组件中添加新的值到 'numbers' 中并不会在第二个组件中反映出来。

useNumbers.js:

import { ref } from 'vue';

export default function() {
    const numbers = ref([1, 2, 3, 4, 5]);

    const addNumber = num => {
        numbers.value.push(num);
    }

    const filterNumber = minNum => {
        return numbers.value.filter(curNum => curNum >= minNum);
    }

    return { numbers, addNumber, filterNumber }
}

Component A:

Component B:

每当我在组件A中点击按钮（将45添加到数组中），这个变化不会在组件B中反映出来。我知道，像解构赋值这样的操作会导致丢失响应性。

const { numbers, addNumber } = useNumbers()

破坏了响应性。我尝试使用toRef和toRefs进行了一些尝试，但目前还没有找到解决方案。