사용자가 클릭한 index 인식문제

<template>
  <nav class="menu">
    <a href="#" v-for="(n,i) in nav" :key="i">{{n}}</a>
  </nav>
  <div class="black-bg" v-if="isOpenModal == true">
    <div class="white-bg">
      <h4>{{oneroomInfo[index].title}}</h4>
      <p>{{oneroomInfo[index].content}}</p>
      <button @click="close">닫기</button>
    </div>
  </div>
  <div v-for="(room, i) in oneroomInfo" :key="i" >
    
    <h3 @click="more" index="i">{{room.title}}</h3>
    <p>{{room.content}}</p>
    <span>{{room.price}}</span>
  </div>
</template>

<script>
import oneroom from "./assets/oneroom";

export default {
  name: 'App',
  data(){
    return{
      nav: ['Home','Products','About'],
      oneroomInfo: oneroom,
      isOpenModal: false,
      index: 0,
    }
  },
  methods: {
    more(){
      this.isOpenModal = true
    },
    close(){
      this.isOpenModal = false
    }
  },
  components: {}
}
</script>


1. index가 0으로만 출력이 되는 이유를 모르겠습니다
2. 변수들을 보관함에 저장해놓으면 전역변수로 인식하나요?
   보관함에 저장해 놓은 변수들의 사용범위가 궁금합니다.

• 이 게시글은 유아린에 의해 9 월, 3 주 전에 수정됐습니다.
• 이 게시글은 유아린에 의해 9 월, 3 주 전에 수정됐습니다.
• 이 게시글은 유아린에 의해 9 월, 3 주 전에 수정됐습니다.
• 이 게시글은 유아린에 의해 9 월, 3 주 전에 수정됐습니다.
• 이 게시글은 유아린에 의해 9 월, 3 주 전에 수정됐습니다.