Apply suggestions from code review

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
Co-authored-by: Adrià Fontcuberta <afontcu@gmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

Author: 4 people

src/api/computed-watch-api.md

@@ -94,7 +94,7 @@ Alias of `watchEffect` with `flush: 'sync'` option.
 
 ## `watch`
 
-The `watch` API is the exact equivalent of the Options API [this.\$watch](./instance-methods.html#watch) (and the corresponding [watch](./options-data.html#watch) option). `watch` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
+The `watch` API is the exact equivalent of the Options API [this.$watch](./instance-methods.html#watch) (and the corresponding [watch](./options-data.html#watch) option). `watch` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
 
 - Compared to [watchEffect](#watcheffect), `watch` allows us to:
 

src/api/directives.md

@@ -494,7 +494,7 @@
   </div>
   ```
 
-  When the component's `selected` state changes, a large amount of vnodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying "only update this item if it went from non-selected to selected, or the other way around". This allows every unaffected item to reuse its previous vnode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.
+  When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying "only update this item if it went from non-selected to selected, or the other way around". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.
 
   `v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates.
 

src/api/sfc-script-setup.md

@@ -4,7 +4,7 @@ sidebarDepth: 1
 
 # SFC `<script setup>`
 
-`<script setup>` is a compile-time syntacitc sugar for using [Composition API](https://v3.vuejs.org/api/composition-api.html) inside Single File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API. It provides a number of advantages over the normal `<script>` syntax:
+`<script setup>` is a compile-time syntactic sugar for using [Composition API](https://v3.vuejs.org/api/composition-api.html) inside Single File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API. It provides a number of advantages over the normal `<script>` syntax:
 
 - More succinct code with less boilerplate
 - Ability to declare props and emitted events using pure TypeScript
@@ -85,7 +85,7 @@ Values in the scope of `<script setup>` can also be used directly as custom comp
 </template>
 ```
 
-Think of `MyComponent` as being referenced as a varaible. If you have used JSX before, the mental model is similar here. The kebab-case equivalent `<my-component>` also works in the template - however PascalCase component tags are strongly recommended for consistency. It also helps differentiating from native custom elements.
+Think of `MyComponent` as being referenced as a variable. If you have used JSX before, the mental model is similar here. The kebab-case equivalent `<my-component>` also works in the template - however PascalCase component tags are strongly recommended for consistency. It also helps differentiating from native custom elements.
 
 ### Dynamic Components
 
@@ -179,8 +179,8 @@ Usage of `slots` and `attrs` inside `<script setup>` should be relatively rare,
 
 `<script setup>` can be used alongside normal `<script>`. A normal `<script>` maybe needed in cases where we need to:
 
-- Declare options that cannot be expressed in `<script setup>`, for example `inheritAttrs` or custom options enabled via plugins;
-- Declaring named exports;
+- Declare options that cannot be expressed in `<script setup>`, for example `inheritAttrs` or custom options enabled via plugins.
+- Declaring named exports.
 - Run side effects or create objects that should only execute once.
 
 ```html

src/api/sfc-spec.md

@@ -40,7 +40,7 @@ export default {
 
 ### `<script>`
 
-- Each `*.vue` file can contain at most one `<script>` block at a time (excluding `<script setup>`).
+- Each `*.vue` file can contain at most one `<script>` block at a time (excluding [<script setup>](/api/sfc-script-setup.html)).
 
 - The script is executed as an ES Module.
 

src/api/sfc-style.md

@@ -40,7 +40,7 @@ With `scoped`, the parent component's styles will not leak into child components
 
 ### Deep Selectors
 
-If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` psuedo-class:
+If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` pseudo-class:
 
 ```vue
 <style scoped>
@@ -76,7 +76,7 @@ By default, scoped styles do not affect contents rendered by `<slot/>`, as they
 
 ### Global Selectors
 
-If you want just one rule to apply globally, you can use the `:global` pseudo-class:
+If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `<style>` (see below):
 
 ```vue
 <style scoped>

src/api/sfc-tooling.md

@@ -9,9 +9,9 @@ You don't need to install anything on your machine to try out Vue SFCs - there a
 - [Vue on CodeSandbox](https://codesandbox.io/s/vue-3)
 - [Vue on Repl.it](https://replit.com/@templates/VueJS-with-Vite)
 - [Vue on Codepen](https://codepen.io/pen/editor/vue)
-- [Vue on StackBlitz](stackblitz.com/fork/vue)
+- [Vue on StackBlitz](https://stackblitz.com/fork/vue)
 
-It is also recommend to use these online playgrounds to provide reproductions when reporting bugs.
+It is also recommended to use these online playgrounds to provide reproductions when reporting bugs.
 
 ## Project Scaffolding
 
@@ -61,7 +61,7 @@ Most other editors have community-created syntax highlighting support for Vue, b
 
 - Vue CLI comes with [Jest](https://jestjs.io/) and [Mocha](https://mochajs.org/) integrations.
 
-- If you are manually confugring Jest to work with Vue SFCs, check out [vue-jest](https://github.com/vuejs/vue-jest) which is the official Jest transform for Vue SFCs.
+- If you are manually configuring Jest to work with Vue SFCs, check out [vue-jest](https://github.com/vuejs/vue-jest) which is the official Jest transform for Vue SFCs.
 
 ## Custom Blocks Integration
 
@@ -91,4 +91,4 @@ Official plugin that provides Vue SFC support in Vite.
 
 - [Docs](https://vue-loader.vuejs.org/)
 
-The official loader that provides Vue SFC support in webpack. If you are using Vue CLI, also see [docs on modifying `vue-loader` options in Vue CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader).
+The official loader that provides Vue SFC support in webpack. If you are using Vue CLI, also see [docs on modifying `vue-loader` options in Vue CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader).