Vue3中Signature Modal页面切换后无法重新挂载问题求助

我在Approval组件内嵌套了Signature Modal组件，该组件同时被购物车页面和审批页面使用。加载购物车页面时，Signature Modal会被渲染并挂载；从购物车页面点击按钮跳转到审批页面时，该模态框会被卸载，但审批页面中的同款Signature Modal却不会重新挂载或渲染。这个问题已经困扰我几周了，我尝试过使用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>

Approval/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(() => {
});
</script>

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'));
    }
}

内容的提问来源于stack exchange，提问作者mykylesmile