@click.stop.prevent doesn't work on v-expansion-panel-title

I am migrating my project to Vue3. I have an v-expansion-panel where I have a hyperlink in panel title. It was working in Vue2. However, in vue3 it is not working. I can't click the link. It keeps expanding, closing the panel instead. I tried @click.stop and @click.stop.prevent. However, both didn't help.

Here is an example code from vue playground. What should I do to fix this?

<template>
  <v-expansion-panels>
    <v-expansion-panel>
      <v-expansion-panel-title>
        <template v-slot:default>
          <v-row no-gutters>
            <v-col class="d-flex justify-start" cols="4">
              Trip name
              <v-spacer></v-spacer>
              <a href="#" @click.stop.prevent>Learn more</a>
            </v-col>
          </v-row>
        </template>
      </v-expansion-panel-title>
      <v-expansion-panel-text>
        <v-text-field
          v-model="trip.name"
          placeholder="Caribbean Cruise"
          hide-details
        ></v-text-field>
      </v-expansion-panel-text>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
  export default {
    data: () => ({
      trip: {
        name: '',
        location: null,
        start: null,
        end: null,
      },
      locations: [
        'Australia',
        'Barbados',
        'Chile',
        'Denmark',
        'Ecuador',
        'France',
      ],
    }),
  }
</script>

The layout of v-expansion-panel-title results in parent button element receiving click events instead of a link because it contains overlay placeholder.

A fix would be to place a link above a placeholder, e.g. by modifying z-index:

<v-expansion-panel-title>
    <template v-slot:default>
      <v-row style="z-index: 1" no-gutters>
        <v-col class="d-flex justify-start" cols="4">
          Trip name
          <v-spacer></v-spacer>
          <a href="#" @click.stop>Learn more</a>
        </v-col>
      </v-row>
    </template>
  </v-expansion-panel-title>