Creating reusable custom components is a core part of Vue, but for the components to actually be useful, we have to actually use them!

Open up your App.vue file, and let's replace the three <div class="form-group"> elements with our custom component.

First things first: what we have to do is import the component to our file. Let's get that out of the way. Add the following import to the top of the <script> element, shown as follows:

import BaseInput from '@/components/BaseInput';

Just importing the file is not enough; we actually have to add the component to the component's property on the file, so that we can then use it inside our template. We currently do not have such a property inside our Vue instance, so let's create one between name and data():

...
components: { BaseInput },
...

Now that we have our component registered, and imported on our App.vue file, we can go into the template and replace the old inputs with our new component:

<BaseInput 
  label="First Name:" 
  v-model="form.firstName" 
/>
<BaseInput 
  label="Last Name:" 
  v-model="form.lastName" 
/>
<BaseInput 
  label="Email:" 
  v-model="form.email" 
  type="email" 
/>

Go back to your browser, and play around with the app. You should see that, even though nothing has actually changed, the form is now driven by reusable input components—if we were ever faced with the need to update the inputs' CSS, for example, we could simply change it once in that file, and the whole application would update to reflect those changes.

Open up your Vue DevTools once again, and make sure that you have the first icon selected (the one for the component structure). Drill down into the structure and you will see your three BaseInput components represented there.

You can even go ahead and click each one of them, and the props panel will clearly display what makes each one of them unique—the props! 

In the following screenshot, you can see that, when I type my name into the Name: field, the <BaseInput> component reflects it in its value property:

One more thing! Type some values into the form and look at the props box, it will update live with the two-way binding in your value property. Now, click on the third icon on your DevTools, the one that looks like a bunch of dots—this is the events view.

Type in one of the inputs again, and you will see that the events box will fill up with entries. Click on one of them, and you'll notice that our input event is being fired with each keystroke. 

These are two different actions—the value getting updated and the input event being fired make up for the v-model doing its job, as we discussed earlier!

Let's take a look at the following screenshot:

In the preceding screenshot, you can see how the <BaseInput> component is emitting input events—payload is what the user has typed into the form.