Minor tweaks to the guides in Essentials

Author: skirtles-code

src/guide/essentials/application.md

@@ -93,7 +93,7 @@ app.config.errorHandler = (err) => {
 }
 ```
 
-The application instance also provides a few methods for registering app-scoped assets. for example, registering a component:
+The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
 
 ```js
 app.component('TodoDeleteButton', TodoDeleteButton)

src/guide/essentials/component-basics.md

@@ -625,6 +625,6 @@ The custom component `<blog-post-row>` will be hoisted out as invalid content, c
 When used on native HTML elements, the value of `is` must be prefixed with `vue:` in order to be interpreted as a Vue component. This is required to avoid confusion with native [customized built-in elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example).
 :::
 
-That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself - build something fun, or check out some of the [Examples](/examples/) if you haven't.
+That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself - build something fun, or check out some of the [Examples](/examples/) if you haven't already.
 
 Once you feel comfortable with the knowledge you've just digested, move on with the guide to learn more about components in depth.

src/guide/essentials/forms.md

@@ -15,7 +15,7 @@ const multiSelected = ref([])
 
 # Form Input Bindings
 
-When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript. It can be cumbersom to manually wire up value bindings and change event listeners:
+When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript. It can be cumbersome to manually wire up value bindings and change event listeners:
 
 ```vue-html
 <input

src/guide/essentials/lifecycle.md

@@ -51,7 +51,7 @@ setTimeout(() => {
 }, 100)
 ```
 
-Do note this doesn't mean that the call must be placed lexically inside `setup()` or `<script setup>` - `onMounted()` can be called in an external function as along as the call stack is synchronous and originates from within `setup()`.
+Do note this doesn't mean that the call must be placed lexically inside `setup()` or `<script setup>` - `onMounted()` can be called in an external function as long as the call stack is synchronous and originates from within `setup()`.
 
 </div>
 

src/guide/essentials/list.md

@@ -90,7 +90,7 @@ const items = [
 
 items.forEach((item, index) => {
   // has access to outer scope `parentMessage`
-  // but `item` and `index` are only avaialble in here
+  // but `item` and `index` are only available in here
   console.log(parentMessage, item.message, index)
 })
 ```

src/guide/essentials/reactivity-fundamentals.md

@@ -535,9 +535,9 @@ export default {
 }
 ```
 
-However, this approach is problematic for components that are reused because a debounce function is **stateful**: it maintains some internal state on the elapsed time. If multiple component instances share the same debounced function, they will interfere with one another.
+However, this approach is problematic for components that are reused because a debounced function is **stateful**: it maintains some internal state on the elapsed time. If multiple component instances share the same debounced function, they will interfere with one another.
 
-To keep the each component instance's debounce function independent from each other, we can create the debounced version of a method in the `created` lifecycle hook:
+To keep each component instance's debounced function independent of the others, we can create the debounced version in the `created` lifecycle hook:
 
 ```js
 export default {
@@ -564,7 +564,7 @@ export default {
 
 ## Reactivity Transform <sup class="vt-badge experimental" /> \*\*
 
-Having to use `.value` with refs is a drawback imposed by the language constraints of JavaScript. However, with compile-time transforms we can improve the ergonomics by automatically appending `.value` in appropriate locations. Vue provides a compile-time transform that allows us to write the ealier "counter" example like this:
+Having to use `.value` with refs is a drawback imposed by the language constraints of JavaScript. However, with compile-time transforms we can improve the ergonomics by automatically appending `.value` in appropriate locations. Vue provides a compile-time transform that allows us to write the earlier "counter" example like this:
 
 ```vue
 <script setup>

src/guide/essentials/template-syntax.md

@@ -241,17 +241,15 @@ Dynamic argument expressions have some syntax constraints because certain charac
 <a :['foo' + bar]="value"> ... </a>
 ```
 
-If you need to pass a complex dynamic argument, it's probably better to use to a [computed property](./computed.html), which we will cover shortly.
+If you need to pass a complex dynamic argument, it's probably better to use a [computed property](./computed.html), which we will cover shortly.
 
 When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
 
 ```vue-html
 <a :[someAttr]="value"> ... </a>
 ```
 
-The above will be converted to `:[someattr]` in in-DOM templates.
-If your component has a "someAttr" property instead of "someattr",
-your code won't work.
+The above will be converted to `:[someattr]` in in-DOM templates. If your component has a `someAttr` property instead of `someattr`, your code won't work.
 
 ### Modifiers