Using a helper function to test Loading and Error components.

async-component-with-helper.vue

<template>
  <div>
    <button v-on:click="showChild = !showChild">Toggle Child Component!</button>
    <child-component v-if="showChild" message="I am the child component."></child-component>
  </div>
</template>

<script>
import LoadingState from '@/components/LoadingState'
import ErrorState from '@/components/ErrorState'

const asyncComponentTester = function(importPromise, latency){
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(importPromise)
    }, latency) 
  })
}

export default {
  name: 'ParentComponent',
  
  components: {
    LoadingState,
    ErrorState,
    ChildComponent: () => ({
      component: asyncComponentTester(import('@/components/ChildComponent'), 2000),
      loading: LoadingState,
      error: ErrorState,
      delay: 200,
      timeout: 1500
    })
  },
  
  data(){
    return {
      showChild: false
    }
  }
}
</script>