0👍
You have declared the tag to display the component inside the v-for loop which runs twice, hence you need to display the component outside of that div.
Updated template section of App.vue file:
<template>
<div>
<div class="enjoy_headline_container">
<div class="EnjoyGirlsContainer">
<div>
<h3>Shrink the screen to 568 pixels or lower to see the problem</h3>
</div>
<div class="EnjoyGirlsList">
<div
v-for="(chunk, index) in Math.ceil(EnjoyGirlsList.length / 2)"
:key="'chunk-' + index"
:class="'wrap-' + index"
>
<div
v-for="(item, index) in EnjoyGirlsList.slice(
(chunk - 1) * 2,
chunk * 2
)"
:key="'img-' + index"
class="EnjoyCard"
:class="'EnjoyCard-' + index"
>
<div>
<img
@mouseover="mouseOver(item, (hover = true))"
v-bind:src="item.imagePath"
alt="Snow"
/>
</div>
<div class="EnjoyCardContainer">
<div
:style="{ background: item.textColor }"
class="EnjoyCardChildContainer"
>
<h3 class="EnjoyCardChildContainerTitleName">
{{ item.titleName }}
</h3>
</div>
</div>
</div>
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
<div
class="HoverLogic"
@mouseleave="mouseout(enjoy, (hover = false))"
v-for="(enjoy, index) in EnjoyGirlsList"
:key="index"
>
<div class="EnjoyGirlsChildHoverEffect">
<component
v-show="enjoy.hovered"
v-bind:is="enjoy.componentName"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Source:stackexchange.com