바로 밑에 글 추가질문입니다.

<h2>각각 코드 입니다.</h2>
<h2>App.vue </h2>

<template>

<div v-if="1 == 2">
 안녕하세요
</div>
<div v-else-if="1 == 3">
<!-- if문 연달아 여러개 쓰고 싶을때 사용(자바스크립트 if문과 같음) -->
 안녕하세요2
</div>
<div v-for="(a,i) in 원룸들" :key="i">

<h4 @click="모달창열렸니 = true; 누른거 = i">{{ a.title }}</h4>
<p>{{ a.price }}원</p>
</div>
<Modal :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니"/>

<div class="menu">
<!-- v-for="작명 in 횟수" :key="작명" key안에 작명은 v-for작명과 이름 동일하게 -->
{{ a }}
</div>

<Discount v-bind="오브젝트" :이름="오브젝트.name" :나이="오브젝트.age"/>

<Card @openModal="모달창열렸니 = true" :원룸="원룸들[i]" v-for="(작명,i) in 원룸들" :key="작명"/>
<!-- <Card :원룸="원룸들[1]"/>
 <Card :원룸="원룸들[2]"/>
 <Card :원룸="원룸들[3]"/>
 <Card :원룸="원룸들[4]"/>
 <Card :원룸="원룸들[5]"/> -->

</template>

<script>

import data from './assets/oneroom.js';
import Discount from './Discount.vue';
import Modal from './Modal.vue';
import Card from './Card.vue';

export default {
name: 'App',
// 데이터보관함 아래처럼 data, return 으로 생성
data(){
return{
오브젝트 : { name : 'kim', age : 20 },
누른거 : 0,
원룸들 : data,
모달창열렸니 : false,
신고수 : [0,0,0],
메뉴들 : ['Home', 'Shop', 'About'],
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
methods : {
increase(){
this.신고수 += 1;

},
},
components: {
Discount : Discount,
Modal : Modal,
Card : Card,
}
}
</script>

<style>
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.discount {
background: #eee;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
.black-bg {
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
position: fixed; padding: 20px;
}
.white-bg {
width: 100%; background: white;
border-radius: 8px;
padding: 20px;
}
.room-img {
width: 100%;
margin-top: 40px;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

.menu{
background: darkslateblue;
padding: 15px;
border-radius: 5px;
}
.menu a {
color: white;
padding: 10px;
}
</style>

<h2>Card.vue</h2>

<template>
<div>

<h4 @click="$emit('openModal')">{{원룸.title}}</h4>
<p>{{원룸.price}}원</p>
</div>
</template>

<script>
export default {
props : {
원룸 : Object,
}
}
</script>

<style>

<h2></style> Modal.vue</h2>

<template>
<div class="black-bg" v-if="모달창열렸니 == true">
<!-- v-if는 조건식, 위문장을 해석해보면, 안에있는 조건식이 참일때만 DIV를 보여줌-->
<div class="white-bg">

<h4>{{ 원룸들[누른거].title }}</h4>
<p>{{ 원룸들[누른거].price }}원</p>
<!-- <button @click="모달창열렸니 = false">닫기</button> -->
</div>
</div>
</template>

<script>
export default {
name : 'Modal',
props : {
원룸들 : Array,
누른거 : Number,
모달창열렸니 : Boolean,
}
}
</script>

<style>

</style>

<Modal :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니"/>

를 <template>바로 밑에뒀더니 클릭시 모달창이 뜹니다!

그런데 선생님 따라서 똑같이 코딩했는데, 왜 선생님은 나오고 저는 안나오고 Modal 컴포넌트 위치를 조정해야 보이는건가요???

답변 정말 감사합니다!!