Cannot open modal with single click followed by no response

[Tao]

The first click after loading the page is fine. Then I need to double click to open it. After a few times, clicking the button to open the modal is not working at all until a couple minutes, and then I can double click to open it. Not sure if something is wrong here.

In parent:

<router-link class=“link-with-bg” v-on:click.native=“showSignUpModal” to="/"> Sign In</router-link>
<signup-modal v-bind:display=“signUpModalDisplay”></signup-modal>

In child:

<template id=“login-template”>
<q-modal v-model=“show” :content-css="{padding: ‘20px’}">
<div class=“q-display-1 q-mb-md”>Modal</div><p>This one gets displayed from .</p>
<q-btn color=“orange” @click=“show = false” label=“Close” />
</q-modal>
</template>

<script>

import {QModalLayout} from 'quasar'

export default {
    
    props: {
        display: {
            type: Boolean,
            required: true
        }
    },
    data: function () {
        return {
            show: null
        }
    },     
    computed: {
        
    },
    components:{
        QModalLayout,
    },
    methods: {
        
    },
    watch: {
        display: function(){
            this.show = this.display
        }
    }
}

</script>

[Tao]

I also tried QDialog, and found the same issue. Also used QBtn to replace the router-link, still have the same problem.

[Tao]

After I moved the Modal into the parent page, the issue is gone. Not sure why I cannot put it into a separate component page.