did you register the component correctly? For recursive components, make sure to provide the “name” option

If you’re using a component within a component (e.g. something like this in the Vue DOM):

App
  MyComponent
   ADifferentComponent
     MyComponent

Here the issue is that MyComponent is both the parent and child of itself. This throws Vue into a loop, with each component depending on the other.

There’s a few solutions to this:

 1. Globally register MyComponent

vue.component("MyComponent", MyComponent)

2. Using beforeCreate

beforeCreate: function () {
  this.$options.components.MyComponent = require('./MyComponent.vue').default
}

3. Move the import into a lambda function within the components object

components: {
  MyComponent: () => import('./MyComponent.vue')
}

My preference is the third option, it’s the simplest tweak and fixes the issue in my case.

More info: Vue.js Official Docs — Handling Edge Cases: Circular References Between Components

Note: if you choose method’s 2 or 3, in my instance I had to use this method in both the parent and child components to stop this issue arising.