Fix grammatical errors and introduce app.component() in introduction.md

src/guide/introduction.md

@@ -52,7 +52,7 @@ const Counter = {
 Vue.createApp(Counter).mount('#counter')
 ```
 
-We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Take a look at the example below where `counter` property increments every second and you will see how rendered DOM changes:
+We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Take a look at the example below where the `counter` property increments every second and you will see how the rendered DOM changes:
 
 ```js{8-10}
 const Counter = {
@@ -158,7 +158,7 @@ Vue.createApp(TwoWayBinding).mount('#two-way-binding')
 
 ## Conditionals and Loops
 
-It's easy to toggle the presence of an element, too:
+It's easy to toggle the presence of an element too:
 
 ```html
 <div id="conditional-rendering">
@@ -220,7 +220,7 @@ The component system is another important concept in Vue, because it's an abstra
 
 ![Component Tree](/images/components.png)
 
-In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with `App` objects and we define it in parent's `components` option:
+In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with the `app` object and we define it in the parent's `components` option:
 
 ```js
 const TodoItem = {
@@ -239,6 +239,20 @@ const app = Vue.createApp({
 app.mount(...)
 ```
 
+Another way to register a component is to use the `component()` method on the `app` object, passing in the name of the component as the first attribute and an options object as the second:
+
+```js
+const app = Vue.createApp({
+  ... // Properties for the component
+})
+
+app.component('todo-item', {
+  template: `<li>This is a todo</li>`
+})
+
+app.mount()
+```
+
 Now you can compose it in another component's template:
 
 ```html
@@ -302,7 +316,7 @@ app.mount('#todo-list-app')
 
 <common-codepen-snippet title="Intro-Components-1" slug="VwLxeEz" />
 
-This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo-item>` component with more complex template and logic without affecting the parent app.
+This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo-item>` component with a more complex template and logic without affecting the parent app.
 
 In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](component-basics.html), but here's an (imaginary) example of what an app's template might look like with components: