Vue component hierarchy, and global and local components

As we learned in Chapter 2, Basic Concepts of Vue 2, to get a new Vue instance running, we use new Vue:

new Vue(
  el: "#app",
  // the rest of the Vue instance code here
)

Our app component resides inside this Vue instance.

The app component usually has a child component, like we saw in this example from Chapter 2, Basic Concepts of Vue 2: https://codepen.io/AjdinImsirovic/pen/xzpOaJ:

Vue.component('custom-article', {
  template: `
    <article>
      Our own custom article component!
    </article>`
})
new Vue({
    el: '#app'
})

What we did not mention in the previous chapter is this:

• A child component can be reused as many times as needed
• A child component can also have its own children

An example of this is available in the following pen: https://codepen.io/AjdinImsirovic/pen/ZjdOdK.

Here is the code which demonstrates these two principles:

// JS
Vue.component('custom-article', {
  template: `
    <article>
      Our own...