<teleport to="body">
        <error v-if="inValid">
        <template #header>
            <h2 class="text-danger">the Error</h2>
        </template>
        <template #content>
            <p>
                please enter the valid data to input !!!
            </p>   
            <button class="btn btn-success" @click="close">click to close</button>
        </template>
    </error>
    </teleport>