Passing data to child components with props

Let's create a small Vue app by starting with a child component called user-item, as shown here:

Vue.component('user-item', {
  template: '<li>John Doe</li>'
})

You can see that it is just a static component and doesn't do much; you can't abstract or reuse it at all. It only becomes reusable if we can pass data into the template dynamically, inside the template property. This can be done with a props property. Let's refactor the component, as follows:

Vue.component('user-item', {
  props: ['name'],
  template: '<li>{{ name }}</li>'
})

In a sense, props behave like variables and we set the data for them with the v-bind directive, as follows:

<ol>
  <user-item
    v-for="user in users"
    v-bind:name="user.name"
    v-bind:key="user.id"
  ></user-item>
</ol>

In this refactored component, we use a v...