onreadystatechange is not working with nuxt-link (vue)

Question

I want to check if media and files are fully loaded with readystate in vue. Below is mounted at testparent/index.vue. I was just testing every form of onreadystatechange, bc none of them works.

mounted() {
document.onreadystatechange = () => {
  if (document.readyState === 'interactive') {
    console.log(document.readyState)
  }

  if (document.readyState === 'complete') {
    console.log(document.readyState)
  }
}

window.addEventListener('load', function (event) {
  console.log(document.readyState)
})

window.addEventListener('DOMContentLoaded', () => {
  console.log(document.readyState)
})

document.addEventListener('readystatechange', (event) => {
  console.log(document.readyState)
})
} 

Below is my template

<nuxt-link to="/testparent/_slug">link to slug</nuxt-link>
<nuxt-link to="/testparent/test">other test link</nuxt-link>

I cannot find any log from the console. but when I refresh the page, the logs comes out. Is there something I did wrong? Or is there other way to do? Thank you in advance