title: Use Quasar, On mouse event, display a list
body: <p>I am doing web development through quasar framework. I want to create a mouse event. I want the following menu to be displayed when a mouse over event, not a mouse click event. I made this <a href="https://codepen.io/jd-0001/pen/GRRVxLZ?editors=1010" rel="nofollow noreferrer">codepen</a> as a reference, but my code didn't work on my web. Help. Excerpts from some of my code. What I want to know is 'how the mouseover event works' in vue3.0?</p>
  <p>This is my Code</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- html --&gt;
  &lt;template&gt;
    &lt;q-btn
      label=&quot;MyBtnName&quot;
      @mouseover=&quot;menuOver = true&quot;
      @mouseleave=&quot;menuOver = false&quot;
    &gt;
      &lt;q-menu v-model=&quot;menuOpen&quot;&gt;
        &lt;q-list&gt;
          &lt;q-item
            @mouseover=&quot;listOver = true&quot;
            @mouseleave=&quot;listOver = false&quot;
             &gt;
            &lt;q-item-section&gt;
              {{ MyItems }}
            &lt;/q-item-section&gt;
          &lt;/q-item&gt;
        &lt;/q-list&gt;
      &lt;/q-menu&gt;
    &lt;/q-btn&gt;
  &lt;/template&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// script
  import { ref } from 'vue';
  import { debounce } from 'quasar';
  
  export default {
    setup() {
      return {
        menuOpen: ref(false),
        menuOver: ref(false),
        listOver: ref(false),
      };
    },
    methods: {
      debounceFunc() {
        debounce(() =&gt; {
          this.checkMenu();
        }, 100);
      },
      checkMenu() {
        if (this.menuOver || this.listOver) {
          this.menuOpen = true;
        }
      },
    },
    watch: {
      mouseOver() {
        return this.debounceFunc();
      },
    },
  };
  </code></pre>