我在Vue.js的父组件中有一个按钮，当我点击按钮时，我会改变一个变量的值并将其传递给子组件。现在，当我将变量注入到子组件中时，它会获得undefined的值，但会在被观察后获得其值。
这是父组件：

const selectedReceipt = ref([]);
provide('selectedReceipt', selectedReceipt);

function setSelectedReceipt(receipt){
    selectedReceipt.value = receipt;
}

 <tr v-for="(receipt,index) in receipts" :key="index">

  <td class="align-middle">{{ index + receipts_Data.from }}</td>
  <td class="align-middle">{{ receipt.hospitals ? receipt.hospitals.en_name: 'N/A' }}</td>
  <td class="align-middle">{{ receipt.years ? receipt.years.en_name : 'N/A' }}</td>
 <td class="align-middle">{{ receipt.months ? receipt.months.month_name : 'N/A' }}</td>
 <td class="align-middle">{{ receipt.assessment_date }}</td>
 <td class="align-middle">{{ receipt.maktoob_no }}</td>
 <td class="align-middle">{{ receipt.maktoob_date }}</td>
 <td class="align-middle">{{ receipt.description }}</td>
 <td class="align-middle">
 <div class="btn-list">
                                                                                  
 <AppButton
                                                @click="setSelectedReceipt(receipt)" type="outline-primary" btn-sm
 data-bs-toggle="modal" data-bs-target="#edit_receipts_modal">
<i class="fe fe-edit"></i></AppButton>
<BtnOptions @click="setSelectedReceipt(receipt)"
 type="outline-primary" btn-sm>
<li><a @click="openDetailsModal">Details</a></li>
<li><a @click="openStaffModal">Staff</a></li></BtnOptions>
    </div>
    </td>
    </tr>

字符串
这是子组件：

const selectedReceipt = inject('selectedReceipt');

watch( () => selectedReceipt, async() => {
        console.log(selectedReceipt.value);
        master_Filter.value.hospital_id = selectedReceipt.value.hospitals.en_name;

        master_Filter.value.assessment_date = selectedReceipt.value.assessment_date;
        master_Filter.value.maktoob_no = selectedReceipt.value.maktoob_no;
        master_Filter.value.maktoob_date = selectedReceipt.value.maktoob_date;

        await getDetails();
    },
    {deep: true });



        <template #footer>

            <button type="reset" form="frm-store" class="btn btn-default btnCloseModal" data-bs-dismiss="modal">{{ Lang.get('Close') }}</button>
            

            <AppButton type="btn-primary">
                <a :href="'printDetails/' + selectedReceipt?.value?.id">Print</a>

            </AppButton>
        </template>

型
问题出在selectedRecipt上，当我想将用户重定向到一个传递selectedRecipt作为id的链接时，它说undefined。