Alright, so now that you understand the basics of what a Vue component is, and we learned how to construct one here, the next step is to figure out how we can store each Vue component within its own file. And then whenever we need to use it, we import it, and we're off to the races. Here's where we left off at the end of the previous episode. And yeah, have a look. Usually it's true we can inline components like this, but in real life, you rarely will. Instead, each component will be stored within its own file. So let's do this. Let's select the entire object here, cut it, and we're going to store it in a new file.

So let's do this. Let's select the entire object here, cut it, and we're going to store it in a new file. Maybe this will be within a JavaScript directory. And then it's also pretty common to see a components directory, so we'll follow that system. Okay, now I can create my file called app-button. Alright, and let's paste in that object. And then I'm going to add export default to the top. Alright, so let's talk about this. If you're unfamiliar, what we have here is referred to as a JavaScript module.

Now I want to import that object, like so. Import app-button from, and then we provide a path to that file. It's as simple as that. Now I can reference it like so. So yeah, it's very simple. We cut that code, we threw it into a file, we exported it, and then when we come back, we can import that object and then reference it like we did before. So what we have here is good, but there is one little issue that you might have picked up on. If we come to the browser and refresh, it doesn't look like it's working.

All right, let's take a look. This is incredibly useful. And yeah, notice what we have here. We have our root component with a single child component called AppButton. And when I click on one of these components, I can see all of the reactive data it's associated with. So for example, right now the button is in a processing state, but I can even tweak that by clicking this checkbox, and now it will be treated as if it's not processing. Very cool. Okay, so make sure you pull this in.