Какое событие даст мне знать, что все компоненты готовы при смене страницы, используя

Question

У меня есть этот код, в котором я слушаю DOMContentLoaded (который всегда работает) и мое пользовательское / собственное событие load, которое я запускаю на смонтированной странице (поскольку событие DOMContentLoaded не запускается при смене страницы с помощью <nuxt-link> навигация).

document.addEventListener('DOMContentLoaded', function() {
  checkElementsInViewportIO()
})

document.addEventListener('load', function() {
  setTimeout(() => {
    checkElementsInViewportIO()
  }, 150)
})

function checkElementsInViewportIO() {
  if (window.IntersectionObserver) {
    const body = document.querySelector('body')

    const observer = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          const element = entry.target
          const scrollPercent = element.dataset.scollpercent || 0.4

          /* Do stuff */
        })
      },
      {
        threshold: [
          0, 0.5, 1
        ],
      }
    )
    document.querySelectorAll('.transition,.transition-bg').forEach((el) => {
      observer.observe(el)
    })
  }
}

Триггер события (в pages/page.vue):

export default {
  /* More logic was here, */
  mounted() {
    const event = document.createEvent('HTMLEvents')
    event.initEvent('load', true, false)
    document.dispatchEvent(event)
  },
}

Но я заметил (потому что они не наблюдаются), что даже я задержка с использованием setTimeout иногда не все компоненты присутствуют в querySelectorAll, поэтому я предполагаю, что они еще не были готовы.

Как я могу убедиться, что все готово (какое событие / обратный вызов / жизненный цикл)?