diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index e16ae1cc03..e35d0c14c1 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -54,7 +54,22 @@ const sidebar = {
       children: ['writing-guide']
     }
   ],
-  api: ['/api/application-config', '/api/application-api']
+  api: [
+    '/api/application-config',
+    '/api/application-api',
+    {
+      title: 'Options',
+      collapsable: false,
+      children: [
+        '/api/options-data',
+        '/api/options-dom',
+        '/api/options-lifecycle-hooks',
+        '/api/options-assets',
+        '/api/options-composition',
+        '/api/options-misc'
+      ]
+    }
+  ]
 }
 
 module.exports = {
@@ -65,22 +80,22 @@ module.exports = {
       'link',
       {
         href: 'https://use.fontawesome.com/releases/v5.13.0/css/all.css',
-        rel: 'stylesheet',
-      },
+        rel: 'stylesheet'
+      }
     ],
     ['link', { rel: 'icon', href: '/logo.png' }],
     [
       'script',
       {
-        src: 'https://player.vimeo.com/api/player.js',
-      },
+        src: 'https://player.vimeo.com/api/player.js'
+      }
     ],
     [
       'script',
       {
         src: 'https://extend.vimeocdn.com/ga/72160148.js',
-        defer: 'defer',
-      },
+        defer: 'defer'
+      }
     ]
   ],
   themeConfig: {
diff --git a/src/api/application-api.md b/src/api/application-api.md
index a0e800c032..8e2651ca97 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -200,7 +200,7 @@ app.mount('#my-app')
 
 - **Details:**
 
-  This option is used together with [`inject`](TODO:inject) are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.
+  This option is [used together with `inject`](../api/options-composition.html#provide-inject) to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.
 
   The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support `Symbol` and `Reflect.ownKeys`.
 
diff --git a/src/api/options-assets.md b/src/api/options-assets.md
new file mode 100644
index 0000000000..06b1364b62
--- /dev/null
+++ b/src/api/options-assets.md
@@ -0,0 +1,21 @@
+# Assets
+
+## directives
+
+- **Type:** `Object`
+
+- **Details:**
+
+  A hash of directives to be made available to the Vue instance.
+
+- **See also:** [Custom Directives](../guide/custom-directive.html)
+
+## components
+
+- **Type:** `Object`
+
+- **Details:**
+
+  A hash of components to be made available to the Vue instance.
+
+- **See also:** [Components](../guide/component-basics.html)
diff --git a/src/api/options-composition.md b/src/api/options-composition.md
new file mode 100644
index 0000000000..375aa79a31
--- /dev/null
+++ b/src/api/options-composition.md
@@ -0,0 +1,321 @@
+# Composition
+
+## mixins
+
+- **Type:** `Array<Object>`
+
+- **Details:**
+
+  The `mixins` option accepts an array of mixin objects. These mixin objects can contain instance options like normal instance objects, and they will be merged against the eventual options using the certain option merging logic. For example, if your mixin contains a `created` hook and the component itself also has one, both functions will be called.
+
+  Mixin hooks are called in the order they are provided, and called before the component's own hooks.
+
+- **Example:**
+
+  ```js
+  const mixin = {
+    created: function() {
+      console.log(1)
+    }
+  }
+
+  Vue.createApp({
+    created() {
+      console.log(2)
+    },
+    mixins: [mixin]
+  })
+
+  // => 1
+  // => 2
+  ```
+
+- **See also:** [Mixins](../guide/mixins.html)
+
+## extends
+
+- **Type:** `Object | Function`
+
+- **Details:**
+
+  Allows declaratively extending another component (could be either a plain options object or a constructor). This is primarily intended to make it easier to extend between single file components.
+
+  This is similar to `mixins`.
+
+- **Example:**
+
+  ```js
+  const CompA = { ... }
+
+  // extend CompA without having to call `Vue.extend` on either
+  const CompB = {
+    extends: CompA,
+    ...
+  }
+  ```
+
+## provide / inject
+
+- **Type:**
+
+  - **provide:** `Object | () => Object`
+  - **inject:** `Array<string> | { [key: string]: string | Symbol | Object }`
+
+- **Details:**
+
+  This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React's `context` feature.
+
+  The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support `Symbol` and `Reflect.ownKeys`.
+
+  The `inject` option should be either:
+
+  - an array of strings, or
+  - an object where the keys are the local binding name and the value is either:
+    - the key (string or Symbol) to search for in available injections, or
+    - an object where:
+      - the `from` property is the key (string or Symbol) to search for in available injections, and
+      - the `default` property is used as fallback value
+
+  > Note: the `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down a reactive object, properties on that object do remain reactive.
+
+- **Example:**
+
+  ```js
+  // parent component providing 'foo'
+  const Provider = {
+    provide: {
+      foo: 'bar'
+    }
+    // ...
+  }
+
+  // child component injecting 'foo'
+  const Child = {
+    inject: ['foo'],
+    created() {
+      console.log(this.foo) // => "bar"
+    }
+    // ...
+  }
+  ```
+
+  With ES2015 Symbols, function `provide` and object `inject`:
+
+  ```js
+  const s = Symbol()
+
+  const Provider = {
+    provide() {
+      return {
+        [s]: 'foo'
+      }
+    }
+  }
+
+  const Child = {
+    inject: { s }
+    // ...
+  }
+  ```
+
+  Using an injected value as the default for a prop:
+
+  ```js
+  const Child = {
+    inject: ['foo'],
+    props: {
+      bar: {
+        default() {
+          return this.foo
+        }
+      }
+    }
+  }
+  ```
+
+  Using an injected value as data entry:
+
+  ```js
+  const Child = {
+    inject: ['foo'],
+    data() {
+      return {
+        bar: this.foo
+      }
+    }
+  }
+  ```
+
+  Injections can be optional with default value:
+
+  ```js
+  const Child = {
+    inject: {
+      foo: { default: 'foo' }
+    }
+  }
+  ```
+
+  If it needs to be injected from a property with a different name, use `from` to denote the source property:
+
+  ```js
+  const Child = {
+    inject: {
+      foo: {
+        from: 'bar',
+        default: 'foo'
+      }
+    }
+  }
+  ```
+
+  Similar to prop defaults, you need to use a factory function for non-primitive values:
+
+  ```js
+  const Child = {
+    inject: {
+      foo: {
+        from: 'bar',
+        default: () => [1, 2, 3]
+      }
+    }
+  }
+  ```
+
+- **See also:** [Provide / Inject](../guide/component-provide-inject.html)
+
+## setup
+
+- **Type:** `Function`
+
+The `setup` function is a new component option. It serves as the entry point for using the Composition API inside components.
+
+- **Invocation Timing**
+
+  `setup` is called right after the initial props resolution when a component instance is created. Lifecycle-wise, it is called before the [beforeCreate](./options-lifecycle-hooks.html#beforecreate) hook.
+
+- **Usage with Templates**
+
+  If `setup` returns an object, the properties on the object will be merged on to the render context for the component's template:
+
+  ```html
+  <template>
+    <div>{{ count }} {{ object.foo }}</div>
+  </template>
+
+  <script>
+    import { ref, reactive } from 'vue'
+
+    export default {
+      setup() {
+        const count = ref(0)
+        const object = reactive({ foo: 'bar' })
+
+        // expose to template
+        return {
+          count,
+          object
+        }
+      }
+    }
+  </script>
+  ```
+
+  Note that [refs](TODO) returned from `setup` are automatically unwrapped when accessed in the template so there's no need for `.value` in templates.
+
+- **Usage with Render Functions / JSX**
+
+  `setup` can also return a render function, which can directly make use of reactive state declared in the same scope:
+
+  ```js
+  import { h, ref, reactive } from 'vue'
+
+  export default {
+    setup() {
+      const count = ref(0)
+      const object = reactive({ foo: 'bar' })
+
+      return () => h('div', [count.value, object.foo])
+    }
+  }
+  ```
+
+- **Arguments**
+
+  The function receives the resolved props as its first argument:
+
+  ```js
+  export default {
+    props: {
+      name: String
+    },
+    setup(props) {
+      console.log(props.name)
+    }
+  }
+  ```
+
+  Note this `props` object is reactive - i.e. it is updated when new props are passed in, and can be observed and reacted upon using `watchEffect` or `watch`:
+
+  ```js
+  export default {
+    props: {
+      name: String
+    },
+    setup(props) {
+      watchEffect(() => {
+        console.log(`name is: ` + props.name)
+      })
+    }
+  }
+  ```
+
+  However, do NOT destructure the `props` object, as it will lose reactivity:
+
+  ```js
+  export default {
+    props: {
+      name: String
+    },
+    setup({ name }) {
+      watchEffect(() => {
+        console.log(`name is: ` + name) // Will not be reactive!
+      })
+    }
+  }
+  ```
+
+  The `props` object is immutable for userland code during development (will emit warning if user code attempts to mutate it).
+
+  The second argument provides a context object which exposes a selective list of properties that were previously exposed on `this`:
+
+  ```js
+  const MyComponent = {
+    setup(props, context) {
+      context.attrs
+      context.slots
+      context.emit
+    }
+  }
+  ```
+
+  `attrs` and `slots` are proxies to the corresponding values on the internal component instance. This ensures they always expose the latest values even after updates so that we can destructure them without worrying accessing a stale reference:
+
+  ```js
+  const MyComponent = {
+    setup(props, { attrs }) {
+      // a function that may get called at a later stage
+      function onClick() {
+        console.log(attrs.foo) // guaranteed to be the latest reference
+      }
+    }
+  }
+  ```
+
+  There are a number of reasons for placing `props` as a separate first argument instead of including it in the context:
+
+  - It's much more common for a component to use `props` than the other properties, and very often a component uses only `props`.
+
+  - Having `props` as a separate argument makes it easier to type it individually without messing up the types of other properties on the context. It also makes it possible to keep a consistent signature across `setup`, `render` and plain functional components with TSX support.
+
+- **See also:** [Composition API](TODO)
diff --git a/src/api/options-data.md b/src/api/options-data.md
new file mode 100644
index 0000000000..3e79026dc6
--- /dev/null
+++ b/src/api/options-data.md
@@ -0,0 +1,292 @@
+# Data
+
+## data
+
+- **Type:** `Function`
+
+- **Details:**
+
+  The function that returns a data object for the Vue instance. In `data`, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data.
+
+  Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance.
+
+  After the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`.
+
+  Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`.
+
+- **Example:**
+
+  ```js
+  // direct instance creation
+  const data = { a: 1 }
+
+  // The object is added to a Vue instance
+  const vm = Vue.createApp({
+    data() {
+      return data
+    }
+  }).mount('#app')
+
+  console.log(vm.a) // => 1
+  ```
+
+  Note that if you use an arrow function with the `data` property, `this` won't be the component's instance, but you can still access the instance as the function's first argument:
+
+  ```js
+  data: vm => ({ a: vm.myProp })
+  ```
+
+- **See also:** [Reactivity in Depth](../guide/reactivity.html)
+
+## props
+
+- **Type:** `Array<string> | Object`
+
+- **Details:**
+
+  A list/hash of attributes that are exposed to accept data from the parent component. It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.
+
+  With Object-based syntax, you can use following options:
+
+  - `type`: can be one of the following native constructors: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, any custom constructor function or an array of those. Will check if a prop has a given type, and will throw a warning if it doesn't. [More information](../guide/component-props.html#prop-types) on prop types.
+  - `default`: `any`
+    Specifies a default value for the prop. If the prop is not passed, this value will be used instead. Object or array defaults must be returned from a factory function.
+  - `required`: `Boolean`
+    Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.
+  - `validator`: `Function`
+    Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation [here](../guide/component-props.html#prop-validation).
+
+- **Example:**
+
+  ```js
+  const app = Vue.createApp({})
+
+  // simple syntax
+  app.component('props-demo-simple', {
+    props: ['size', 'myMessage']
+  })
+
+  // object syntax with validation
+  app.component('props-demo-advanced', {
+    props: {
+      // type check
+      height: Number,
+      // type check plus other validations
+      age: {
+        type: Number,
+        default: 0,
+        required: true,
+        validator: value => {
+          return value >= 0
+        }
+      }
+    }
+  })
+  ```
+
+- **See also:** [Props](../guide/component-props.html)
+
+## computed
+
+- **Type:** `{ [key: string]: Function | { get: Function, set: Function } }`
+
+- **Details:**
+
+  Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance.
+
+  Note that if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument:
+
+  ```js
+  computed: {
+    aDouble: vm => vm.a * 2
+  }
+  ```
+
+  Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance's scope (i.e. not reactive), the computed property will **not** be updated.
+
+- **Example:**
+
+  ```js
+  const app = Vue.createApp({
+    data() {
+      return { a: 1 }
+    },
+    computed: {
+      // get only
+      aDouble() {
+        return this.a * 2
+      },
+      // both get and set
+      aPlus: {
+        get() {
+          return this.a + 1
+        },
+        set(v) {
+          this.a = v - 1
+        }
+      }
+    }
+  })
+
+  const vm = app.mount('#app')
+  console.log(vm.aPlus) // => 2
+  vm.aPlus = 3
+  console.log(vm.a) // => 2
+  console.log(vm.aDouble) // => 4
+  ```
+
+- **See also:** [Computed Properties](../guide/computed.html)
+
+## methods
+
+- **Type:** `{ [key: string]: Function }`
+
+- **Details:**
+
+  Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance.
+
+  :::tip Note
+  Note that **you should not use an arrow function to define a method** (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.
+  :::
+
+- **Example:**
+
+  ```js
+  const app = Vue.createApp({
+    data() {
+      return { a: 1 }
+    },
+    methods: {
+      plus() {
+        this.a++
+      }
+    }
+  })
+
+  const vm = app.mount('#app')
+
+  vm.plus()
+  console.log(vm.a) // => 2
+  ```
+
+- **See also:** [Event Handling](../guide/events.html)
+
+## watch
+
+- **Type:** `{ [key: string]: string | Function | Object | Array}`
+
+- **Details:**
+
+  An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation.
+
+- **Example:**
+
+  ```js
+  const app = Vue.createApp({
+    data() {
+      return {
+        a: 1,
+        b: 2,
+        c: {
+          d: 4
+        },
+        e: 'test',
+        f: 5
+      }
+    },
+    watch: {
+      a(val, oldVal) {
+        console.log(`new: ${val}, old: ${oldVal}`)
+      },
+      // string method name
+      b: 'someMethod',
+      // the callback will be called whenever any of the watched object properties change regardless of their nested depth
+      c: {
+        handler(val, oldVal) {
+          console.log('c changed')
+        },
+        deep: true
+      },
+      // the callback will be called immediately after the start of the observation
+      e: {
+        handler(val, oldVal) {
+          console.log('e changed')
+        },
+        immediate: true
+      },
+      // you can pass array of callbacks, they will be called one-by-one
+      f: [
+        'handle1',
+        function handle2(val, oldVal) {
+          console.log('handle2 triggered')
+        },
+        {
+          handler: function handle3(val, oldVal) {
+            console.log('handle3 triggered')
+          }
+          /* ... */
+        }
+      ]
+    },
+    methods: {
+      someMethod() {
+        console.log('b changed')
+      },
+      handle1() {
+        console.log('handle 1 triggered')
+      }
+    }
+  })
+
+  const vm = app.mount('#app')
+
+  vm.a = 3 // => new: 3, old: 1
+  ```
+
+  ::: tip Note
+  Note that _you should not use an arrow function to define a watcher_ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined.
+  :::
+
+- **See also:** [Watchers](../guide/computed.html#watchers)
+
+## emits
+
+- **Type:** `Array<string> | Object`
+
+- **Details:**
+
+  A list/hash of custom events that can be emitted from the component. It has an Array-based simple syntax and an alternative Object-based syntax that allows to configure an event validation.
+
+  In Object-based syntax, the value of each property can either be `null` or a validator function. The validation function will receive the additional arguments passed to the `$emit` call. For example, if `this.$emit('foo', 1)` is called, the corresponding validator for `foo` will receive the argument `1`. The validator function should return a boolean to indicate whether the event arguments are valid.
+
+- **Usage:**
+
+  ```js
+  const app = Vue.createApp({})
+
+  // Array syntax
+  app.component('todo-item', {
+    emits: ['check'],
+    created() {
+      this.$emit('check')
+    }
+  })
+
+  // Object syntax
+  app.component('reply-form', {
+    emits: {
+      // no validation
+      click: null,
+
+      // with validation
+      submit: payload => {
+        if (payload.email && payload.password) {
+          return true
+        } else {
+          console.warn(`Invalid submit event payload!`)
+          return false
+        }
+      }
+    }
+  })
+  ```
diff --git a/src/api/options-dom.md b/src/api/options-dom.md
new file mode 100644
index 0000000000..a101afa87a
--- /dev/null
+++ b/src/api/options-dom.md
@@ -0,0 +1,65 @@
+# DOM
+
+## template
+
+- **Type:** `string`
+
+- **Details:**
+
+  A string template to be used as the markup for the Vue instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
+
+  If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common `<script type="x-template">` trick to include templates.
+
+  :::tip Note
+  From a security perspective, you should only use Vue templates that you can trust. Never use user-generated content as your template.
+  :::
+
+  :::tip Note
+  If render function is present in the Vue option, the template will be ignored.:::
+
+- **See also:**
+  - [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+  - [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots)
+
+## render
+
+- **Type:** `Function`
+
+- **Details:**
+
+  An alternative to string templates allowing you to leverage the full programmatic power of JavaScript.
+
+- **Usage:**
+
+  ```html
+  <div id="app" class="demo">
+    <my-title blog-title="A Perfect Vue"></my-title>
+  </div>
+  ```
+
+  ```js
+  const app = Vue.createApp({})
+
+  app.component('my-title', {
+    render() {
+      return Vue.h(
+        'h1', // tag name,
+        this.blogTitle // tag content
+      )
+    },
+    props: {
+      blogTitle: {
+        type: String,
+        required: true
+      }
+    }
+  })
+
+  app.mount('#app')
+  ```
+
+  :::tip Note
+  The `render` function has priority over the render function compiled from `template` option or in-DOM HTML template of the mounting element
+  :::
+
+- **See also:** [Render Functions](TODO)
diff --git a/src/api/options-lifecycle-hooks.md b/src/api/options-lifecycle-hooks.md
new file mode 100644
index 0000000000..11a2bf0242
--- /dev/null
+++ b/src/api/options-lifecycle-hooks.md
@@ -0,0 +1,261 @@
+# Lifecycle hooks
+
+:::tip Note
+All lifecycle hooks automatically have their `this` context bound to the instance, so that you can access data, computed properties, and methods. This means **you should not use an arrow function to define a lifecycle method** (e.g. `created: () => this.fetchTodos()`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.fetchTodos` will be undefined.
+:::
+
+## beforeCreate
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## created
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the `$el` property will not be available yet.
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## beforeMount
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called right before the mounting begins: the `render` function is about to be called for the first time.
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## mounted
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called after the instance has been mounted, where element, passed to `Vue.createApp({}).mount()` is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el` will also be in-document when `mounted` is called.
+
+  Note that `mounted` does **not** guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use [vm.\$nextTick](TODO) inside of `mounted`:
+
+  ```js
+  mounted() {
+    this.$nextTick(function () {
+      // Code that will run only after the
+      // entire view has been rendered
+    })
+  }
+  ```
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## beforeUpdate
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called when data changes, before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. to remove manually added event listeners.
+
+  **This hook is not called during server-side rendering, because only the initial render is performed server-side.**
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## updated
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called after a data change causes the virtual DOM to be re-rendered and patched.
+
+  The component's DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it's usually better to use a [computed property](./options-data.html#computed) or [watcher](./options-data.html#watch) instead.
+
+  Note that `updated` does **not** guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use [vm.\$nextTick](TODO) inside of `updated`:
+
+  ```js
+  updated() {
+    this.$nextTick(function () {
+      // Code that will run only after the
+      // entire view has been re-rendered
+    })
+  }
+  ```
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## activated
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called when a kept-alive component is activated.
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:**
+  - [Dynamic Components - keep-alive](../guide/component-basics.html#keep-alive)
+
+## deactivated
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called when a kept-alive component is deactivated.
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:**
+  - [Dynamic Components - keep-alive](../guide/component-basics.html#keep-alive)
+
+## beforeUnmount
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called right before a Vue instance is unmounted. At this stage the instance is still fully functional.
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## unmounted
+
+- **Type:** `Function`
+
+- **Details:**
+
+  Called after a Vue instance has been unmounted. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been unmounted.
+
+  **This hook is not called during server-side rendering.**
+
+- **See also:** [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## errorCaptured
+
+- **Type:** `(err: Error, instance: Component, info: string) => ?boolean`
+
+- **Details:**
+
+  Called when an error from any descendent component is captured. The hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured. The hook can return `false` to stop the error from propagating further.
+
+  :::tip
+  You can modify component state in this hook. However, it is important to have conditionals in your template or render function that short circuits other content when an error has been captured; otherwise the component will be thrown into an infinite render loop.
+  :::
+
+  **Error Propagation Rules**
+
+  - By default, all errors are still sent to the global `config.errorHandler` if it is defined, so that these errors can still be reported to an analytics service in a single place.
+
+  - If multiple `errorCaptured` hooks exist on a component's inheritance chain or parent chain, all of them will be invoked on the same error.
+
+  - If the `errorCaptured` hook itself throws an error, both this error and the original captured error are sent to the global `config.errorHandler`.
+
+  - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or the global `config.errorHandler` from being invoked for this error.
+
+## renderTracked
+
+- **Type:** `(e: DebuggerEvent) => void`
+
+- **Details:**
+
+  Called when virtual DOM re-render is tracked. The hook receives a `debugger event` as an argument. This event tells you what operation tracked the component and the target object and key of that operation.
+
+- **Usage:**
+
+  ```html
+  <div id="app">
+    <button v-on:click="addToCart">Add to cart</button>
+    <p>Cart({{ cart }})</p>
+  </div>
+  ```
+
+  ```js
+  const app = Vue.createApp({
+    data() {
+      return {
+        cart: 0
+      }
+    },
+    renderTracked({ key, target, type }) {
+      console.log({ key, target, type })
+      /* This will be logged when component is rendered for the first time:
+      {
+        key: "cart",
+        target: {
+          cart: 0
+        },
+        type: "get"
+      }
+      */
+    },
+    methods: {
+      addToCart() {
+        this.cart += 1
+      }
+    }
+  })
+
+  app.mount('#app')
+  ```
+
+## renderTriggered
+
+- **Type:** `(e: DebuggerEvent) => void`
+
+- **Details:**
+
+  Called when virtual DOM re-render is triggered.Similarly to [`renderTracked`](#rendertracked), receives a `debugger event` as an argument. This event tells you what operation triggered the re-rendering and the target object and key of that operation.
+
+- **Usage:**
+
+  ```html
+  <div id="app">
+    <button v-on:click="addToCart">Add to cart</button>
+    <p>Cart({{ cart }})</p>
+  </div>
+  ```
+
+  ```js
+  const app = Vue.createApp({
+    data() {
+      return {
+        cart: 0
+      }
+    },
+    renderTracked({ key, target, type }) {
+      console.log({ key, target, type })
+    },
+    methods: {
+      addToCart() {
+        this.cart += 1
+        /* This will cause renderTriggered call
+          {
+            key: "cart",
+            target: {
+              cart: 1
+            },
+            type: "set"
+          }
+        */
+      }
+    }
+  })
+
+  app.mount('#app')
+  ```
diff --git a/src/api/options-misc.md b/src/api/options-misc.md
new file mode 100644
index 0000000000..55cd1e415e
--- /dev/null
+++ b/src/api/options-misc.md
@@ -0,0 +1,46 @@
+# Misc
+
+## name
+
+- **Type:** `string`
+
+- **Restriction:** only respected when used as a component option.
+
+- **Details:**
+
+  Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.createApp({}).component({})`, the global ID is automatically set as its name.
+
+  Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
+
+## inheritAttrs
+
+- **Type:** `boolean`
+
+- **Default:** `true`
+
+- **Details:**
+
+  By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting `inheritAttrs` to `false`, this default behavior can be disabled. The attributes are available via the `$attrs` instance property and can be explicitly bound to a non-root element using `v-bind`.
+
+  Note: this option does **not** affect `class` and `style` bindings.
+
+- **Usage:**
+
+  ```js
+  app.component('base-input', {
+    inheritAttrs: false,
+    props: ['label', 'value'],
+    template: `
+      <label>
+        {{ label }}
+        <input
+          v-bind="$attrs"
+          v-bind:value="value"
+          v-on:input="$emit('input', $event.target.value)"
+        >
+      </label>
+    `
+  })
+  ```
+
+- **See also:** [Disabling Attribute Inheritance](../guide/component-props.html#disabling-attribute-inheritance)
diff --git a/src/guide/component-props.md b/src/guide/component-props.md
index 2ae9155416..a281879a2f 100644
--- a/src/guide/component-props.md
+++ b/src/guide/component-props.md
@@ -311,7 +311,7 @@ app.component('my-component', {
 })
 ```
 
-With `inheritAttrs: false` and `$attrs`, you can manually decide which element you want to forward attributes to, which is often desirable for [base components](TODO:../style-guide/#Base-component-names-strongly-recommended):
+With `inheritAttrs: false` and `$attrs`, you can manually decide which element you want to forward attributes to, which is often desirable for [base components](../style-guide/#base-component-names-strongly-recommended):
 
 ```js
 app.component('base-input', {
diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md
index f80ab4569d..58f46e5d98 100644
--- a/src/guide/component-registration.md
+++ b/src/guide/component-registration.md
@@ -16,14 +16,14 @@ app.component('my-component-name', {
 
 The component's name is the first argument of `app.component`. In the example above, the component's name is "my-component-name".
 
-The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](TODO: single-file-components.html)), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names:
+The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](TODO), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names:
 
 1. All lowercase
 2. Contains a hyphen (i.e., has multiple words connected with the hyphen symbol)
 
 By doing so, this will help you avoid conflicts with current and future HTML elements.
 
-You can see other recommendations for component names in the [Style Guide](TODO:../style-guide/#Base-component-names-strongly-recommended).
+You can see other recommendations for component names in the [Style Guide](../style-guide/#base-component-names-strongly-recommended).
 
 ### Name Casing
 
diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index 78c0962a42..46dd36c805 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -1,7 +1,5 @@
 # Conditional Rendering
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-conditionals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how conditional rendering works with Vue School">Learn how conditional rendering works with a free lesson on Vue School</a></div>
-
 ## `v-if`
 
 The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
@@ -90,7 +88,7 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
 ## `v-if` with `v-for`
 
 ::: tip Note
-Using `v-if` and `v-for` together is **not recommended**. See the [style guide](TODO:/v2/style-guide/#Avoid-v-if-with-v-for-essential) for further information.
+Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
 :::
 
 When used together with `v-if`, `v-for` has a higher priority than `v-if`. See the [list rendering guide](list#v-for-with-v-if) for details.
diff --git a/src/guide/forms.md b/src/guide/forms.md
index 76e2e9a7da..8da0000edb 100644
--- a/src/guide/forms.md
+++ b/src/guide/forms.md
@@ -324,4 +324,4 @@ If you want whitespace from user input to be trimmed automatically, you can add
 
 > If you're not yet familiar with Vue's components, you can skip this for now.
 
-HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](TODO:components.html#Using-v-model-on-Components) in the Components guide.
+HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](./component-basics.html#using-v-model-on-components) in the Components guide.
diff --git a/src/guide/instance.md b/src/guide/instance.md
index bd273e87f9..07bfedfe1f 100644
--- a/src/guide/instance.md
+++ b/src/guide/instance.md
@@ -16,7 +16,7 @@ Vue.createApp(/* options */).mount('#app')
 
 Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our Vue instance.
 
-When you create a Vue instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](TODO:../api/#Options-Data).
+When you create a Vue instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/options-data.html).
 
 A Vue application consists of a **root Vue instance** created with `createApp`, optionally organized into a tree of nested, reusable components. For example, a todo app's component tree might look like this:
 
@@ -31,7 +31,7 @@ Root Instance
       └─ TodoListStatistics
 ```
 
-We'll talk about [the component system](TODO:components.html) in detail later. For now, just know that all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).
+We'll talk about [the component system](component-basics.html) in detail later. For now, just know that all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).
 
 ## Data and Methods
 
@@ -123,11 +123,9 @@ In the future, you can consult the [API reference](TODO:../api/#Instance-Propert
 
 ## Instance Lifecycle Hooks
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Lifecycle Hooks Lesson">Watch a free lesson on Vue School</a></div>
-
 Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
 
-For example, the [`created`](TODO:../api/#created) hook can be used to run code after an instance is created:
+For example, the [created](../api/options-lifecycle-hooks.html#created) hook can be used to run code after an instance is created:
 
 ```js
 Vue.createApp({
@@ -143,7 +141,7 @@ Vue.createApp({
 })
 ```
 
-There are also other hooks which will be called at different stages of the instance's lifecycle, such as [`mounted`](TODO:../api/#mounted), [`updated`](TODO:../api/#updated), and [`destroyed`](TODO:../api/#destroyed). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it.
+There are also other hooks which will be called at different stages of the instance's lifecycle, such as [mounted](../api/options-lifecycle-hooks.html#mounted), [updated](../api/options-lifecycle-hooks.html#updated), and [unmounted](../api/options-lifecycle-hooks.html#unmounted). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it.
 
 ::: tip
 Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.
@@ -153,4 +151,6 @@ Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript
 
 Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.
 
+> TODO: Diagram should be changed in order to replace `beforeDestroy` and `destroyed` with `beforeUnmount` and `unmounted` respectively
+
 <img src="/images/lifecycle.png" width="500" style="margin: 0px auto;display: block;" />
diff --git a/src/guide/list.md b/src/guide/list.md
index 56d3e0dd48..993c0fb224 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -267,7 +267,7 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 ## `v-for` with `v-if`
 
 :::tip
-Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](TODO) for details.
+Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for details.
 :::
 
 When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only _some_ items, like below: