While writing a vue3 single file component i came across this issue. I am rendering this custom component inside a for loo. What is happening is any changes to the component template(tailwind class, changes to dom elements etc.) did not update all instances of this component – only the last OR the first instance was updating. Here is the code:

//File: CustomVenue.vue
<template>
    <div class="flex items-center">
        <img src="https://fastly.picsum.photos/id/1067/200/300.jpg?hmac=9UpH9GvB6swkUWpIG1N53lIk9vdO4YcIwlH59M8er18"
            alt="" width="100" height="100"
        >
        <span class="ml-6 text-blue-700 font-semibold text-sm">Venue name</span>
    </div>
</template>

<script setup>
    const props = defineProps({
        id: String
    });
</script>

And this is how it is rendered inside the for loop:

                <div class="flex flex-col gap-y-2">
                    <template v-for="(venue, index) in filteredVenues" :key="`custom_venue_${index}`">
                        <CustomVenue :id="`custom_venue_${index}`" />
                    </template>
                </div>

It is a very simple component at this stage.
What i noticed is if i change the component definition to this:

<span class="ml-6 text-blue-700 font-semibold text-sm">Venue names - {{ id }}</span>

Basically just outputting the id propperty, things seem ok. All class changes in the template deifition affects all the rendered instance of this component.

Is this a bug? If not can someone please explain why the later version works? As you can see i even added the :key arritube on the rendered instances as suggested while loop rendering.