Question - How do you resolve circular dependencies between components?
Answer -
In complex applications, vue components will actually be each other’s descendent and ancestor in the render tree.
Let's say componentA and componentB included in their respective templates which makes circular dependency,
//ComponentA
//ComponentB
This can be solved by either registering(or wait until) the child component in beforeCreate hook or using webpack's asynchronous import while registering the component,
Solution1:
beforeCreate: function () {
this.$options.components.componentB = require('./component-b.vue').default
}
Solution2:
components: {
componentB: () => import('./component-b.vue')
}