Build A Collapsible Tree Menu With Vue.js Recursive Components

A recursive component in Vue.js is one which invokes itself e.g.:
Vue.component(‘recursive-component’, {
template: `
<recursive-component></recursive-component>`
});
Recursive components are useful for displaying comments on a blog, nested menus, or basically anything where the parent and child are the same, albeit with different content. For example: