I'm quite new with vue.js and all its possibilites but i kinda start to feel comfortable with it. Here is my issue: i got a list that contains a lot of objects of the same type. This object contains some data in it. What i am trying to do is to create a view for each object and to display the data in it into the corresponding view. Here is some code to help you understand my issue.

<Card 
  v-for="room in rooms" :key="room" 
  class="room" 
  v-on:change="selectedBuilding" 
  style="margin-top: 2rem; margin-left: 7rem; margin-right: 7rem"
>
  <template #header></template>
  <template #title>
    <router-link to="/Building/Room" class="pr-2" v-bind="room">
      Salle {{room.name}} - Level {{room.floor}}
    </router-link>
    <Divider type="solid"/>
  </template>
  <template #content>
    <Button 
      label="Edit" 
      class="p-button-raised p-button-secondary p-button-text" 
      icon="pi pi-fw pi-pencil" 
    ></Button>
    <div>
      <Divider type="solid" style="color: #0d3c61"/>
    </div>
  </template>
  <template #footer></template>
</Card>

As you can see i have a bunch of rooms and i'd like to have a view for each one. Also i'd like to display the data of each room into the corresponding view. I searched in the forum and all over the documentation but i didn't found something relevant or i didn't understand the purpose of the tools.

I was also asking myself if it's possible to create one unique vue which changes depending on the data of the room i clicked on ? Because all the rooms got the same type of data and will be displayed in the same way, only the content of the data changes.

So i'm asking directly here if it's possible to do the first one or the other solution and if it is, how can i do it ? Thanks a lot in advance !