How load component after First Contentful Paint or first elements in Vue.js or Nuxt.js?

My goal is best solution the First Contentful Paint with Vue.js or Nuxt.js

I think the best solution is to load component with import after when the first elements are loaded.

I don't know if is best solution, I would like to hear your opinions.

What is best way to code?

Trying:

The file is loaded with app.js, how load only a time when I set to true?

<template>
  <h1>Hello World</h1>

  <!-- First content here -->

  <foo v-if="documentLoaded" />
</template>

mounted() {
  document.onreadystatechange = () => {
    if (document.readyState == "complete") {
      console.log('Page completed with image and files!')

      setTimeout(() => {
        this.documentLoaded = true
      }, 2000);

    }
  }
},
components: {
  Foo: () => import(/* webpackChunkName: "component-foo" */ '~/components/foo')
}

from How load component after First Contentful Paint or first elements in Vue.js or Nuxt.js?