[Vue-Element] el-card's click event failure solution

In element-ui, I suddenly found that the click event was added to el-card, but no matter how I clicked, it could not be triggered. as follows:

 <el-card v-for="menuItem in menuItems" :key="menuItem.id" @click="handleMenu(menuItem)" class="menu-card">
          <div class="menu-card-header">
            <img :src="menuItem.avatar" class="menu-avatar">
          </div>
          <div class="menu-card-content"  >
            <h3 class="menu-card-title">{
   
   { menuItem.title }}</h3>
            <p class="menu-card-description">{
   
   { menuItem.description }}</p>
          </div>
        </el-card>

Check the information, it is said that the click event needs to be written @click.native, and it is indeed solved, as follows:

 <el-card v-for="menuItem in menuItems" :key="menuItem.id" @click.native="handleMenu(menuItem)" class="menu-card">
          <div class="menu-card-header">
            <img :src="menuItem.avatar" class="menu-avatar">
          </div>
          <div class="menu-card-content"  >
            <h3 class="menu-card-title">{
   
   { menuItem.title }}</h3>
            <p class="menu-card-description">{
   
   { menuItem.description }}</p>
          </div>
        </el-card>

Principle:
The function of the .native modifier is to convert a vue component into an ordinary HTML tag, and this modifier has no effect on ordinary HTML tags.
Of course, it is unclear why el-card does not support click. If anyone understands, please post a comment to let me know, thank you!