V-for components are unintentional synced

Hi everyone!

I’m using a v-for to render a bootstrap card group. Like so:

 <b-card-group>
	 <cardthumbnail v-for="card in cards" :card="card" :key="card.card_id" :ref="'card_' + card.card_id"/>

 </b-card-group>

The problem I have is that each card has a click event, and when I click on the event for a card the first cards event gets triggered, no matter what card I click on. When I inspect the card group I can see that all the card components share the data tag i.e. <div data-v-75643...> the div tags are all indentical.

Now I really want the components to be distinct in the sense that the click event only triggers the card you acctually click on, and not the first card in the card array.

I thought the key would solve this problem, but it dindt change anything. Anyways hope my problem makes sense, and please share any tips or thoughts as to why this is happening

Best regards,
mvind