Okay, let's take a look at an update to v-model, which allows you to use it multiple times on one component. So I'm in my app.vue file here, and say I wanted to make an invite form that requires a person's name and email. Now if I were to use the form directly here, we can make use of v-model as before on the inputs directly. So if I were just to do input, and this one would be for name, we can just do v-model and keep a piece of state for that, and one for the email as well. So this would be the same as before. But if I wanted to extract a component, say InviteForm, then the inputs would live in

So this would be the same as before. But if I wanted to extract a component, say InviteForm, then the inputs would live in this component, but having v-models will allow me to synchronize it between this new component and state in this parent component. So let's say I had some state here, so I'm going to make a setup method, and let's make one for the inviteName. Let's make it a ref, let me just import this, and let's make it an empty string by default, and let's give one for the inviteEmail. And as always, don't forget to return these pieces of state. So inviteName, and inviteEmail.

And as always, don't forget to return these pieces of state. So inviteName, and inviteEmail. So underneath the inviteForm, I'm just going to render these out to see that they're synchronized with the state in the inviteForm. So let's just say, inviteName, and inviteEmail. Okay, so let's go ahead and make this InviteForm component. So I'm going to import it here, import, InviteForm, and let's make sure to add a components key. Actually, it's going to be in the components folder. So let's go ahead and create that here.

Actually, it's going to be in the components folder. So let's go ahead and create that here. Say invite-form.blade.php, and let's scaffold this out. So here is where our form will be, and the action doesn't really matter. Let's make two sections, one for the invite name and one for the invite email. So I'll just put a label here for name, let's call it name, and let's put an input here, and that's okay for now. Let's duplicate this, and let's make this one for email. Okay, so let's save this and see what we get in the browser. Okay.

Okay, so let's save this and see what we get in the browser. Okay. So like I said, we want to synchronize this state with these two input boxes here. So this is definitely possible in Vue 2 if you just make use of events and listen for the events in the parent component, and we're still going to make use of events here, but we're going to utilize the ability to make use of multiple v-models. So if we go into our parent component, we can put v-models on the inviteForm here, and we can have more than one. So v-model equals. So if the input boxes were on this component, we can just do something like this, invite

So v-model equals. So if the input boxes were on this component, we can just do something like this, inviteName. But now the v-model takes a parameter here, and to do that, we just add a colon and give it the name. In this case, it's name, and this gets passed in as a prop to the InviteForm component, and we can do this multiple times. So we'll do another one for the email. So let's say email, and I want this to synchronize with inviteEmail on this component, and now the InviteForm takes two props.

So let's say email, and I want this to synchronize with inviteEmail on this component, and now the inviteForm takes two props. So let's accept those props in here, and I'm just going to make use of the array syntax here. So let's say name and email, and now in our input boxes here, we just have to specify a value binding and an event, and we have to name the event a certain name, and this will work with the multiple v-models in the parent component. So the value is just going to be the prop that's being passed in. So for this case, it's name, and the event is the input event, and I'm just going to do an inline here.

So for this case, it's name, and the event is the input event, and I'm just going to do an inline here. So it's going to take event as a param, and it's going to be a callback, and we want to emit an event here, and the name of this is important. So we have to say update:name in this case, and this will allow the name prop here to synchronize with the parent component, and the second parameter is just going to be event.target.value. So whatever the user types in, and I'm going to copy this entire thing and paste it in here and change it for the email. So type is email, value is email, and we are updating the email.

here and change it for the email. So type is email, value is email, and we are updating the email. Okay, so if I did everything correctly, if I type in here, so I have this rendering out, so hopefully this renders it out as I type, and it doesn't work. What did I do wrong? Okay, it seems like it works after I refresh the page, so I didn't change anything, but now it's being synchronized as I type. So if you need to synchronize state between a parent and a custom child component, you can make use of multiple v-models.

can make use of multiple v-models.