Real Vue apps are not one big template. They are built from components: small, reusable pieces such as a header, a list item, or a form, each with its own template, logic, and styles. In Vue, a component usually lives in its own .vue single-file component.
Once an interface is split up, the pieces need to share data. You will learn how a parent passes data down to a child with props, how a child talks back with the custom events from the previous module, and how to design components so they can be reused in many places.
Watch the lessons in order, then continue on to Computed, Watchers & Lifecycle.
Brad Traversy creates his first component, a header, and uses it inside the main app.
Making a component configurable by passing data into it from its parent with props.
Pulling one item of a list out into its own component, so each task is rendered by a reusable piece.
The Net Ninja starts building larger Vue projects with the Vue CLI, where each component lives in its own file.
The Net Ninja goes deeper into larger projects, including how to pass data (props) between components.
The "Reusable Components" section of freeCodeCamp's Vue 3 course: designing components so they can be used in many places.