Now we're confident our code is cleaner, we can move on to making Vue components for the various parts of our app. Put aside your code for now and open a new document while you get to grips with components.
Vue components are extremely powerful and a great addition to any Vue app. They allow you to make packages of reusable code that include their own data, methods, and computed values.
For our app, we have the opportunity to create two components: one for each person and one for the filtering section of our app. I would encourage you to always look at breaking your app into components where possible—this helps group your code into related functions.
Components look like mini Vue instances as each one has its own data, methods, and computed objects—along with some component-specific options that we will cover shortly. Components are also...