我在一个审批组件中有一个签名模态组件，购物车页面和审批页面组件都使用该组件。当加载购物车页面时，将呈现或挂载签名模态。每当我从购物车页面上的按钮导航到批准页面时，签名模态就会被卸载。但是，它不会在批准页面上重新装载或重新呈现，即使批准页面也使用与购物车页面相同的签名模式。为什么会这样？
我已经研究了好几周了。
我已经尝试过v-if和:key属性，但同样的问题和错误。
以下是这些场景的简化代码：
Vue组件

ShoppingCart.vue

<template>
        <DefaultLayout :title="`Shopping Cart`">
                <div id="shopping-cart">

                    <CartInformation />

                    <div><ShoppingCartItem /></div>

                </div>
        </DefaultLayout>
    </template>

    <script setup>
    import DefaultLayout from '@/Layouts/DefaultLayout.vue';
    import CartInformation from './CartInformation.vue'
    import ShoppingCartItem from './ShoppingCartItem.vue'
    </script>

CartInformation.vue

<template>
    <div>
        <Link :href="approveAll()">
            <div>Approve All</div>
        </Link>
    </div>
</template>
<script setup>
import { Link } from '@inertiajs/vue3';
const approveAll = () => {
    return route('approval');
}
</script>

ApprovalPage.vue

<template>
    <DefaultLayout :title="`Approval`">
        <div class="uk-container">
            <Approval />
        </div>
    </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '@/Layouts/DefaultLayout.vue';
import Approval from '@/Components/Approval/Index.vue';
</script>

ShoppingCartItem.vue

<template>
    <a
        href="javascript:void(0)"
        @click="onApprove()"
        class="uk-button"
        >
            <span>Approve Item</span>
    </a>
    <ApproveModal ref="approveModal" />
</template>

<script setup>
import ApproveModal from '@/Components/ShoppingCart/Modals/ApproveModal.vue';
const onApprove = () => {
    approveModal.value.showModal();
};
</script>

ApproveModal.vue

<template>
    <PlainModal :id="modalId" :fullscreen="true">
        <div uk-height-viewport>
            <div id="approve-single-item">
                <Approval/>
            </div>
        </div>
    </PlainModal>
</template>
<script setup>
import PlainModal from '@/Components/Common/PlainModal.vue';
import Approval from '@/Components/Approval/Index.vue';
import { modal } from "uikit";
import { useApprovalStore } from '@/stores/approval';
import { onUpdated, ref } from 'vue';
const props = defineProps({
    cartItem: {
        type: Object,
        default: { }
    },
})
const modalId = "approve-single-item-modal";
const approvalStore = useApprovalStore();
approvalStore.setItems(props);
approvalStore.setActiveItem(props.cartItem);

onUpdated(() => {
    approvalStore.setItems({
        cart_items: [props.cartItem]
    });
    approvalStore.setActiveItem(props.cartItem);
});

const showModal = () => {
    modal(`#${modalId}`).show();
};

defineExpose({
    showModal
});
</script>

Approva/Index.vue

<template>
    <div class="uk-box-shadow" v-if="approvalStore.getActiveItem">
        <hr />
        <div class="uk-padding">
            <hr class="uk-margin-small" />
            <div>
                <div class="uk-text-center">
                    <Button :text="`Approve`" @click="onApprovedItem()" />
                </div>
            </div>
        </div>
    </div>

    <Signature ref="signatureModal"></Signature>
</template>

<script setup>
import Button from '../Common/Button.vue';
import Signature from '@/Components/Signature/Index.vue'
import { useApprovalStore } from '@/stores/approval';
import { ref, watch } from 'vue';
const approvalStore = useApprovalStore();
const signatureModal = ref(null);

watch(
    () => approvalStore.isFinished,
    isFinished => {
        if (isFinished) {
            signatureModal.value.showSignatureModal();
        }
    }
)

const onApprovedItem = () => {
    const activeItem = approvalStore.getActiveItemId;
    approvalStore.approvedItem(activeItem);
}
</script>

Signature/Index.vue

<template>
    <PlainModal :id="modalId" :fullscreen="true">
        <div uk-height-viewport>
            <h3>Signature</h3>
            <!-- other components -->
        </div>
    </PlainModal>
</template>

<script setup>
import PlainModal from '@/Components/Common/PlainModal.vue';
import { modal } from 'uikit';
import { onUnmounted } from 'vue';

const modalId = 'signature-modal';

const showSignatureModal = () => {
    modal(`#${modalId}`).show();
}
defineExpose({
    showSignatureModal
});
onUnmounted(() => {
});

Laravel文件

web.php（用于路由）

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Pages\ShoppingCartController;

Route::prefix('shopping-cart')
->middleware('auth')
->controller(ShoppingCartController::class)
->group(function() {
    Route::get('/', 'showApproval')->name('approval');
});

ShoppingCartController.php

namespace App\Http\Controllers\Pages;
use App\Http\Controllers\Controller;
use Inertia\Inertia;
use App\Models\CartItem;
class ShoppingCartController extends Controller
{
    public function showApproval()
    {
        $cart_items = [CartItem];
        return Inertia::render('ShoppingCart/ApprovalPage', compact('cart_items'));
    }
}