Parent component only pass the dynamic v-modal ID to the child of the first page in pagination

[MuaathAlhaddad]

I am using vue@2.6.11 and bootstrap-vue@2.11.0

I am having a component called index.vue to list all customers.
and a child component customerModal.vue to control the v-modal for Edit and Create Cusotmer form.

I am using v-table to list the customers details with button actions

index.vue //customer create btn

<!-- {{-- CREATE CUSTOMER --}} -->

    <b-button   @click="$root.$emit('bv::show::modal', 'customerModal' , $event.target)"  variant="success" title="Create New Customer">
        <i class="fas fa-plus-circle" id="action-icon" style="right:3%"></i>
    </b-button>  

    <!-- Modal Customer -->
    <customer-modal   :customers="customers"   modalType="create" @create-customer="customers.push($event)"></customer-modal>

index.vue //customer edit btn

<b-table
    show-empty 
    :filter="filter"
    @filtered="on_filtered"
    id="customers-table" 
    :sort-by.sync="sort_by"
    :sort-desc.sync="sort_desc"
    :items="customers" 
    :fields="fields" 
    :per-page="per_page" 
    :current-page="current_page" 
    responsive
    hover
    head-variant="light"
    class="text-center mt-4"
    >
        <template v-slot:cell(actions)="data">      
            <div class="btn-group" role="group">

                <!-- {{-- EDIT CUSTOMER --}} -->
                <b-button   @click="$root.$emit('bv::show::modal', data.item.first_name.replace(/\s/g, '')+data.item.id, $event.target)" variant="primary" title="Edit Customer">
                    <i class="fas fa-edit"></i>
                </b-button>

                <!-- Customer Modal-->
                <customer-modal  modalType="edit" :selectedCustomer="data.item" :customers="customers" @update-customer="data.item = $event"></customer-modal>
                
            </div>                
        </template>

index.vue //b-pagination

            <b-pagination
                        class=" m-auto justify-content-center"
                        pills
                        :per-page="per_page"
                        :total-rows="rows"
                        v-model="current_page"
                        aria-controls="#customers-table"
                        
                    >
            </b-pagination>

customerModal.vue

       <b-modal
            :id="this.customer.first_name.replace(/\s/g, '')+this.customer.id || 'customerModal'"
            title="Customer Modal"
            @hidden="resetModal"
            hide-footer
        >

The problem

when I go to next page using b-pagination the btn edit does not show the corresponding v-modal. While in the first page all edit btns for each customer are working just fine.

However if I add the create btn to the list in the second page, it will work fine

[Hiws]

If you can create a reproduction of the issue in a codepen or codesandbox, it would be easier for us to try and debug the issue.

You can export to codepen or codesandbox from the playground for a ready to use template.

[MuaathAlhaddad]

https://codepen.io/muaath-esmail-al-haddad/pen/wvMzwJw?editors=1111

@Hiws
I have uploaded the target code here, But I am sorry I had an extra error where the modal can not be triggered by edit at all and I could not solve it the playground.

[Hiws]

I've answered on your StackOverflow question with what i think the issue is, hope it works for you.