I have this:
let activeOldEvents = false
<h2 id="accordion-flush-heading-1">
<button v-on:click="activeOldEvents = !activeOldEvents" type="button" class="flex items-center justify-between w-full mt-5 mb-2 font-medium text-left text-gray-500 font-bold dark:border-gray-700 dark:text-gray-400">
<span>Vergangene Events anzeigen</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" :class="activeOldEvents ? 'rotate-0' : 'rotate-180'" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div class="grid grid-cols-6 gap-6" v-show="activeOldEvents">
<div v-for="event in oldEventsSorted" class="sm:max-sm:mb-3 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg col-span-6 sm:col-span-3">
<a :href="'/event/' + event.event_id">
<div :style="eventBgString" class="relative w-full aspect-square overflow-hidden rounded-lg h-48 bg-cover bg-center from-[#1F2937] bg-cover before:absolute before:inset-0 before:bg-gradient-to-t">
<h1 class="text-3xl font-bold bottom-0 absolute m-5 text-white">{{ event.title }}</h1>
<span class="text-white font-bold absolute m-5"><i class="fa-regular fa-calendar-days mr-1 fa-fw"></i> {{ moment(event.date).format('dddd, Do MMMM YYYY') }}</span>
<span class="text-white font-bold absolute m-5"><i class="fa-regular fa-clock mr-1 mt-8 fa-fw"></i> {{ moment(event.date).format('H:mm') + ' Uhr' }}</span>
</div>
</a>
</div>
</div>
But somehow the div does not get active when clicking the button, eventhough "activeOldEvents" is definitely set to true, I logged it. Why is that?