The beauty of components is being able to use them multiple times in the same view. This gives you the ability to have one single "source of truth" for the layout of that data. We're going to make a repeatable component for our people list and a separate component for the filtering section.

Open your people listing code you created in the last couple of chapters and create a new component titled team-member. Don't forget to define the component before your Vue app is initialized. Add a prop to the component to allow the person object to be passed in. For validation purposes, only specify that it can be an Object:

      Vue.component('team-member', {
        props: {
          person: Object
        }
      });

We now need to integrate our template into the component, which is everything inside (and including) the tr in...