Passing dynamic object values to Modal Popup in VUE opening wrong ID value - vue.js

Question

I'm passing a dynamic object value into a Vue modal template but for some reason the ID that gets passed is always 1 + the selected ID, even though my console.log shows the right ID selected. It should be opening content for the ID selected.
(Also my modal button isnt closing.)
My pen is here: You can see its always trying to open the id + 1
https://codepen.io/omarel/pen/jXJVPw
VUE
// global component
Vue.component('popup',{
template: '#popup',
props: ["floorplan"]
})
//VUE connection
var floorplans = new Vue({
el:"#floorplans",
data: {
popup: false,
id: 1,
floorplans: [
{
"id": 1,
"building": "214",
"residence": "106",
"classname": "studio",
"bed": 0,
"bath": 1,
"den": 0,
"price": "$x,xxx",
"img": "floorplans/images/x.png",
"pdf": "floorplans/pdfs/x.pdf"
},
{
"id": 2,
"building": "214",
"residence": "109",
"classname": "1bed",
"bed": 1,
"bath": 1,
"den": 0,
"price": "$x,xxx",
"img": "floorplans/images/x.png",
"pdf": "floorplans/pdfs/x.pdf"
},
{
"id": 3,
"building": "214",
"residence": "208",
"classname": "1bed",
"bed": 1,
"bath": 1,
"den": 0,
"price": "$x,xxx",
"img": "floorplans/images/x.png",
"pdf": "floorplans/pdfs/x.pdf"
},
{
"id": 4,
"building": "214",
"residence": "205",
"classname": "1bed",
"bed": 1,
"bath": 1,
"den": 1,
"price": "$x,xxx",
"img": "floorplans/images/x.png",
"pdf": "floorplans/pdfs/x.pdf"
},
{
"id": 5,
"building": "210",
"residence": "303",
"classname": "2bed",
"bed": 2,
"bath": 2,
"den": 0,
"price": "$x,xxx",
"img": "floorplans/images/x.png",
"pdf": "floorplans/pdfs/x.pdf"
}
]
},
methods: {
// opennfloorplan: function(event) {
// console.log(event.id);
// }
pop: function(id){
console.log(id);
this.id = id;
console.log(this.id);
this.popup = true;
}
}
})
HTML
<section id="floorplans" class="table">
<table v-cloak class="sortable">
<thead>
<tr>
<th scope="col" class="sorttable_sorted">Residence<span id="sorttable_sortfwdind"> ▾</span></th>
<th scope="col">Bed/Bath</th>
<th scope="col">Building</th>
<th scope="col">Price</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="floorplan in floorplans" v-bind:class="floorplan.classname">
<td data-label="Residence">{{ floorplan.residence }}</td>
<td data-label="Bed/Bath">
<span v-if="floorplan.bed"> {{floorplan.bed}} BEDROOM </span>
<span v-else="floorplan.bed"> STUDIO </span>
<span v-if="floorplan.den"> + {{floorplan.den}} DEN </span>
<span v-if="floorplan.bath"> / {{floorplan.bath}} BATH</span>
</td>
<td data-label="Building">{{ floorplan.building }}</td>
<td data-label="Price">{{ floorplan.price }}</td>
<td data-label="Floor Plan">
{{ floorplan.id }}
<a v-on:click="pop(floorplan.id)" href="javascript:;" class="btn view white openfloorplan">View</a>
<a v-bind:href="floorplan.pdf" target="_blank" class="btn apply blue">Apply</a>
</td>
</tr>
</tbody>
</table>
<popup v-if="popup" :floorplan="floorplans[id]"></popup>
</section>
<template id="popup">
<transition name="popup">
<div class="popup">
<div class="content"><img width="200" height="106" />
<p>{{ floorplan.id }}</p>
<p>{{ floorplan.residence }}</p>
<button v-on:click="floorplans.$data.popup = false">button</button>
</div>
</div>
</transition>
</template>

Answer 1

You are using the index, not the id. floorplans[id] is just an array index. Your ids number from 1, but arrays number from zero, so floorplans[1] is the second floorplan, whose id is 2.

Answer 2

floorplans[id] will get the floorplan at INDEX id. Your floorplan ids start at 1 and array indexes start at 0.
<tr v-for="(floorplan, index) in floorplans" v-bind:class="floorplan.classname">
<a v-on:click="pop(index)" href="javascript:;" class="btn view white openfloorplan">View</a>