Why @mouseover action in vue cannot work

The mouseover action cannot work; it cannot console.log the message when I mouseover

code

<template>
  <div id="horrizontalNav">
    <el-menu class="el-menu-demo" mode="horizontal" >
      <el-menu-item index="1" @mouseover="showUp">find Music</el-menu-item>
    </el-menu>

  </div>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      showUp() {
        console.log('succeed')
      }
    },
  }
</script>