How to run VueJS code only after Vue is fully loaded and initialized?

use vue mounted() to run any code on page load, and updated() to run after any component operations, so a perfect solution would be combining both Roy j and vue lifecycle hooks

mounted() {
    window.addEventListener('load', () => {
         // run after everything is in-place
    })
},

// 99% using "mounted()" with the code above is enough, 
// but incase its not, you can also hook into "updated()"
//
// keep in mind that any code in here will re-run on each time the DOM change
updated() {
    // run something after dom has changed by vue
}

note that you can omit the window.addEventListener() and it still going to work but it might miss + if you are using something like jquery outerHeight(true) its better to use it inside the window event to make sure you are getting correct values.

Update 1 :

instead of window.addEventListener('load') there is also another way by using document.readyState so the above can be

mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        // run code here
    } 
  }
},

Update 2 :

the most reliable way i’ve found so far would be using debounce on $nextTick, so usage becomes

import debounce from 'lodash/debounce'

// bad
updated() {
    this.$nextTick(debounce(() => {
        console.log('test') // runs multiple times
    }, 250)) // increase to ur needs
}

// good
updated: debounce(function () {
    this.$nextTick(() => {
        console.log('test') // runs only once
    })
}, 250) // increase to ur needs

when using debounce with updated it gets tricky, so make sure to test it b4 moving on.

Update 3 :

you may also try MutationObserver