I'm adding an event listener for a DOM element in a component that exists within a Vue modal:

this.$bvModal.show('modal-upload-file')
this.$nextTick(() => {
        document.querySelector('#file').addEventListener('focus', () => {
          document.getElementsByClassName('file-uploads')[0].classList.add('btn-outline-primary')
          document.getElementsByClassName('file-uploads')[0].classList.remove('btn-primary')
        })
      })

The listener works great but I'd like to remove it when the Modal component closes; my application is an SPA and won't need it on other pages. Though I know that I can just use removeEventListener, my question is whether the event listeners are destroyed automatically when the Modal is closed since the elements inside the Modal no longer exist.