考虑到vue.js 3中的以下可组合'useNumbers.js'，我希望组件中的'numbers'是reactive的。但是向第1个组件中的数字添加新值不会反映在第2个组件中。
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 }
}

字符串
组分A：

<template>
    <div>
        <h1>Child component</h1>
        <p>{{ numbers  }}</p>
        <button @click="addNumber(45)">Add 45</button>
        <div class="line"></div>
        <GrandChild />
    </div>
</template>

<script setup>

import useNumbers from '../composables/useNumbers';
import GrandChild from './GrandChild.vue';

const { numbers, addNumber } = useNumbers()

</script>

型
组分B：

<template>
    <div>
        <h1>GreatGrandChild component</h1>
        <p>{{  numbers }}</p>
        <div class="line"></div>
    </div>
</template>

<script setup>

import useNumbers from '../composables/useNumbers';

const { numbers } = useNumbers();

</script>

型
每当我单击组件A中的按钮（将45推到数组中）时，更改不会反映在组件B中。我知道那种解构主义

const { numbers, addNumber } = useNumbers()

型
破坏React性。我已经尝试过使用toRef和toRefs，但到目前为止还没有解决方案。