How can I listen to keyboard shortcuts only in the active component Vue.js VueUse

Question

I use VueUse and useMagicKeys, but have a problem that I want to use the same keyboard shortcut in the Vue page as well as in a dialog.

I want to open a shortcuts help dialog for the page, but when I open another dialog I want the shortcuts help dialog to be specific for that dialog. How could I do that? My listener is now registered twice and runs twice...

useMagicKeys({
  passive: false,
  onEventFired: (e: KeyboardEvent) => {
    if (e.type !== 'keydown') return

    if (e.key === 'F1') {
      e.preventDefault()
      e.stopImmediatePropagation()
      openShortcutsDialog()
    }
  }
})