Convenient way to pop up context menu for each row in qtable in Quasar

I am new to Quasar.

I know I can use the @row-contextmenu event of q-table to notify that a row has been long pressed (in mobile mode) or right clicked (in desktop mode).

But how can I pop up my context menu in the right place? I tried the v-model directive for q-menu to handle it. But there are two problems.

1. the menu popup is offset.

2. both the browser's right click menu and my menu pop up.

The code is as follows.

<template>
  <q-page class="row items-center justify-evenly tiny-align">
    <q-menu touch-position v-model="showRowMenu">
      <q-list dense>
        <q-item v-close-popup>
          <q-item-section>Open...</q-item-section>
        </q-item>
        <q-separator />
        <q-item clickable v-close-popup>
          <q-item-section>New</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
    <q-table
      class="full-width"
      :rows="rows"
      row-key="id"
      @row-contextmenu="popRowMenu"
    >
    </q-table>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';

class Student {
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
  id: number;
  name: string;
}

const showRowMenu = ref(false);
const rows = ref<Array<Student>>([
  { id: 1, name: 'Aaron' },
  { id: 2, name: 'Bob' },
]);

function popRowMenu(evt: Event, _: Student, index: number) {
  showRowMenu.value = true;
}
</script>