Vue dynamically add Component

For my Vue project i have a login component and a responsive overlay component. I built it that way so i could load my responsive overlay component with the needed content using props. To help you understand the structure, it looks like the following:

Home.vue

<script setup lang="ts">
    import ResponsiveOverlay from '../components/responsiveOverlay.vue'
</script>

<template>
    <div class="overlayWrapper">
       <ResponsiveOverlay v-if='showDisplay' :switchContent='switchOverlayContent'></ResponsiveOverlay>
    </div>
</template>

ResponsiveOverlay.vue

<script setup lang="ts">
    import LoginOverlay from '../components/loginOverlay.vue'

    const props = defineProps({
        switchContent: String, 
})

</script>

<template>
    <div class="responsiveOverlayWrapper">
        <LoginOverlay v-if='switchContent == "login"'></LoginOverlay>
    </div>
</template>

LoginOverlay.vue

<template>
    <h1>Login</h1>
</template>

SwitchOverlayContent is a string variable, that (as of now) is hardcoded to contain "login"

As you can see, i tried using v-if="showDisplay" with the ResponsiveOverlay in a hope i could just toggle the bound bool and it would show, which did not work, probably because the v-if is only ran when loading the page. So what i would need is a solution where i could click a button which would then set switchOverlayContent dynamically to "login" and then display the ResponsiveOverlayContent. How would i achieve said behaviour and also, is my strategy of having a component inside of a component viable?