[Vuejs]-In Vue, Why key duplication occurs when if and for are on a label？

It’s because in your first example both the option-group and Option components are rendered thus same key is in two different elements, one in option-group and one in Option.

Both are rendered because you used v-for and v-if at the same time. It is not recommended because

VueJS prioritizes the v-for directive over the v-if directive. So under the hood, it loops through every element and THEN checks the v-if conditional.

You can read more about it here