Vue 3: Unable to position child component as fixed to viewport with programatically created components

Question

I have an app that looks something like this:

Upon entering correct information all works fine. But upon entering wrong information, it is meant to show an error component that covers the whole page.

The code for main component is as follows, to better understand it, just look at the 2 comments in it (one in template, one in javascript)

<template>
    <div class="loginpagecontainer screencentered">
        <div class="largetext flexcentered">
            <img src="../../../artwork/emirlogoexported.svg" class="textheight"/><span id="logotext">Emir</span>
        </div>
        <div id="formcontainer">
            <span>BID</span> <TextInput ref="bid"/>
            <span>Password</span> <TextInput password ref="pwd"/>
        </div>
        <div class="flexend">
            <ButtonText text="Sign Up" type="clean" @click="signUp"/>
            <ButtonText text="Sign In" @click="signIn"/>
        </div>
        <!-- NOTICE THIS COMPONENT -->
        <div ref="errcontainer">

        </div>
    </div>
</template>z

<script>
import ButtonText from './ButtonText.vue';
import TextInput from './TextInput.vue';
import ErrorPopup from './ErrorPopup.vue';
import * as emirjs from '../emirjs.js';
import { createApp } from 'vue';

export default {
    name: "LoginPage",
    components: { TextInput, ButtonText },
    methods: {
        signIn() {
            localStorage.setItem("emir_bid", this.$refs.bid.getValue());
            localStorage.setItem("emir_pwd", this.$refs.pwd.getValue());
            emirjs.info().then((data) => {
                if (emirjs.emirOkCodes.includes(data.code)) {
                    console.log("Login Successful");
                } else {
                    // THE CODE THAT HANDLES FALIURES
                    console.log("Login Failed");
                    localStorage.removeItem("emir_bid");
                    localStorage.removeItem("emir_pwd");
                    
                    // THIS IS THE CREATION OF THE INSTANCE OF ErrorPopup and 
                    // is mounted to the errcontainer.
                    createApp(ErrorPopup).mount(this.$refs.errcontainer);
                }
            });
        },

        signUp() {
        }
    }
};
</script>

<style>
#background {
    min-height: 100vh;
    min-width: 100vw;
}

.screencentered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loginpagecontainer {
    border: 0px solid var(--border);
    border-radius: var(--radius-large);
    padding: 1em;
    text-align: justify;
    background-color: var(--bg-level1);
}

.textcenter {
    text-align: center;
}

.largetext {
    font-size: 2em;
    font-weight: bold;
}

.textheight {
    height: 1em;
    vertical-align: middle;
}

.flexcentered {
    display: flex;
    align-items: center;
    justify-content: center;
}

#logotext {
    padding-left: 0.1ch;
}

#formcontainer {
    display: grid;
    padding-top: 1em;
    grid-template-columns: repeat(2, auto);
    grid-row-gap: 0.3em;
    grid-column-gap: 1em;
    padding-bottom: 1em;
}

.flexend {
    display: flex;
    justify-content: flex-end;
}
</style>

Finally, the code for ErrorPopup component is as follow, the code given here is very crude so do not mind it.

<template>
<div class="fixcenter"> ERR </div>
</template>
<script>

</script>
<style>
.fixcenter {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
}
</style>

As you can see, the position is set to be fixed which suggests that it should be on the topleft of the viewport and it is meant to cover the whole page.

Now see what happens on wrong credentials:

Upon inspecting via devtools:

And yes, I tried my best to google my way out but as my last resort, I had to ask a question on SO.

Answer 1

<!-- NOTICE THIS COMPONENT -->
<div ref="errcontainer">

</div>

This component it's inside <div class="loginpagecontainer screencentered"> wich has centered style, try to separate these components.

Here, take a look: https://codesandbox.io/s/nameless-cloud-5h291l?file=/src/components/Test.vue

Screenshot