How to remove a event in Vue?

On my Vue instance i have this:

async mounted () {
  document.addEventListener('paste', this.onPasteEvent)
},
beforeDestroy () {
  document.removeEventListener('paste', this.onPasteEvent)
},
methods: {
  onPasteEvent () {
    return async (event) => {
      try {
        const items = event.clipboardData.items
        const files = await this.getBase64Files(items)

        this.transferedItems = files
        this.modal = true
      } catch (error) {
        this.$toast.error('Não foi possível detectar um arquivo na área de transferência.')
      }
    }
  },

I’m trying to destroy the “paste” event when the component is destroyed, but this just doesnt work, i know i need to pass the same reference to removeEventListener, but is this not the same reference?

The only way i found to make this work is placing the onPasteEvent method outside the Vue instance as a constant, but that way i don’t have access to this instance, which is important to me, also, i can’t pass anything as arguments, if i try to pass something, looks like my function create a new reference on memory, making unable to destroy it using removeEventListener.

Please, i just don’t understand how to remove a event in Javascript, can someone help me with that example? I already saw a lot of similar questions but no one explains:

  • How to keep the method reference even if it has parameters.
  • How to remove the event working with Vue instances.