Скрытие элементов списка
 

Подскажите пожалуйста как реализовать такую возможность: Чтобы когда нажималась кнопка Войти в комнату, уже открытая комната закрывалась? Либо когда нажималась кнопка Войти в комнату, весь список скрывался, кроме выбранной комнаты?
На картинке как не должно быть.

Vue.component('room-row', {
props: ['room'],
data: function() {
    return {
        id: ''
    }
},
template:
    '<div>' +
    '<div v-if="id === room.id">' +
    'Комнта №{{room.id}}:' +
    'Лампочка {{room.activeLamp}}' +
    '<input type="button" value="On/Off" @click="edit"/>' +
    '<input type="button" value="Выйти из комнаты" @click="exit">' +
    '</div>' +
    '<div v-else>' +
    'Комнта №{{room.id}}:' +
    '<input type="button" value="Войти в комнату" @click="id = room.id"/>' +
    '</div>' +
    '</div>',
methods: {
    edit: function () {
        var room = {activeLamp: true}
        sendRoom({id: this.id}, room)
    },
    exit: function () {
        this.id = ''
    }
}
});

Vue.component('rooms-list', {
    props: ['rooms'],
    template:
        '<div><room-row v-for="room in rooms" :key="room.id" :room="room" /></div>'
});