I'm going through a Vuetify theme to learn how to use it and came across a new syntax I've never seen before for importing one Vue component into another.

I searched on Google, but can't find any reference to this method.

Instead of importing a component before the export, the component is imported as the return value from an arrow function. I know that it works because the site is working, I'm just trying to understand what is happening compared to the normal style of importing and what benefits this offers. Any insight is appreciated!

Typical Syntax:

<script>
import CoreAppBar from "@/components/CoreAppBar.vue";
import CoreFooter from "@/components/CoreFooter.vue";

export default {
  components: {
    CoreAppBar,
    CoreFooter,
  },
};
</script>

Syntax I'd like to understand:

<script>
  export default {
    name: 'App',

    components: {
      CoreAppBar: () => import('@/components/core/AppBar'),
      CoreFooter: () => import('@/components/core/Footer'),
    },
  }
</script>