Vue.js wont show more than one component on screen

I am currently working on a vue.js application. I am using the CDN , not the CLI instalation.

I just created this component

Vue.component('intro', {
    template: '<div id="intro">\n' +
    '<div class="content">\n' +
    '    <img src="images\\logo.svg" alt="" id="logo">\n' +
    '<h2>Hello! My name is Juliana Villegas. I am an interactive media designer. I love mobile, web and creative development. <br> <span id="welcome">Welcome to my portafolio!</span></h2>\n' +
    '</div>\n' +
    '</div>'
})

And i make it appear on my html like this:

<div id="app">
    <intro></intro>

</div>

The component shows up on screen just fine, but everything else i create is not visible.

I've tried to duplicate it, and even place a simple

after the tag, but nothing besides that first component shows up on screen. I've also tried making the component position relative, and still nothing.

Is it something related to vue, or maybe i made a mistake in the css? here is how the css goes to far

body{
    background-color: black;
    overflow: scroll;
}
#stars-container{
    z-index: 0;
}
#intro{
    z-index: 99;
    width: 100vw;
    height: 100vh;
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
}
#logo{
    width: 30vw;
margin-bottom: 5vh;
}
img{

}
h2{
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    font-size: 16pt;
}
#welcome{
    font-weight: 700;
}
p{
color: #FFFFFF;
}