My modal component in Vue3 doesn't remount on page change

I have a signature modal component inside an approval component that is being used by both the shopping cart page and approval page components. When the shopping cart page is loaded, the signature modal is rendered or mounted. Whenever I navigate to the approval page from a button on the shopping cart page, the signature modal is unmounted. However, it doesn't remount or rerender on the approval page, even though the approval page also uses the same signature modal as the shopping cart page. Why is this happening?

Been working on this for weeks now.

I've already tried the v-if and the :key properties but same issue and error.

Here are the simplified codes for these scenario:

Vue Components

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 files

web.php (for routing)

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

Already resolved. I discovered that the approval component was unmounted during page change including its child. When it remounts on page change, its child components (like the signature modal) doesn't remount. So i used the v-if in signature modal and change the value of the variable in the v-if through onMounted and onUnmounted lifecycle hooks of the Approval component