Add Composition API docs

content/roadmaps/105-vue/content/101-advanced-topics/100-ref.md

@@ -1 +1,10 @@
-# Ref
+# Ref
+
+`ref()` and `reactive()` are used to track changes of its argument. When using them to initialize variables you give Vue information: “Hey, I want you to re-build or re-evaluate everything that depends on those variables every time they change”.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@bsalwiczek/ref-vs-reactive-in-vue-3-whats-the-right-choice-7c6f7265ce39'>Ref() vs Reactive() in Vue 3 — what’s the right choice?</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/reactivity-core.html#ref'>Reactivity API — ref</BadgeLink>
+
+
+

content/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md

@@ -1 +1,9 @@
-# Torefs
+# toRefs
+
+`toRefs` converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. Each individual ref is created using `toRef()`.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Offial API Docs' href='https://vuejs.org/api/reactivity-utilities.html#toref'>Reactivity API — toRefs</BadgeLink>
+<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=sAj6tdVS2cA'>Vue 3: Reactivity Made Easy (ref, reactive, toRefs... oh my!)</BadgeLink>
+
+

content/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md

@@ -1 +1,8 @@
-# Reactive
+# reactive
+
+`reactive` allows us to create reactive data structures. Reactive objects are [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and behave just like normal objects. The difference is that Vue is able to track the property access and mutations of a reactive object.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official API' href='https://vuejs.org/api/reactivity-core.html#reactive'>Reactivity API — reactive</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://developers.deepgram.com/blog/2022/02/diving-into-vue-3-reactivity-api/'>Diving into Vue 3 - The Reactivity API</BadgeLink>
+

content/roadmaps/105-vue/content/101-advanced-topics/103-computed.md

@@ -1 +1,7 @@
-# Computed
+# computed
+
+`computed` takes a getter function and returns a readonly reactive `ref` object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/reactivity-core.html#computed'>Reactivity Core — computed</BadgeLink>
+

content/roadmaps/105-vue/content/101-advanced-topics/104-watch.md

@@ -1 +1,7 @@
-# Watch
+# watch
+
+`watch` watches one or more reactive data sources and invokes a callback function when the sources change.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/reactivity-core.html#watch'>Reactivity API — watch</BadgeLink>
+

content/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md

@@ -1 +1,6 @@
-# Next tick
+# nextTick
+
+`nextTick` is a utility for waiting for the next DOM update flush.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/general.html#nexttick'>Global API — nextTick</BadgeLink>

content/roadmaps/105-vue/content/101-advanced-topics/106-composables.md

@@ -1 +1,11 @@
-# Composables
+# Composables
+
+In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.
+
+When building frontend applications, we often need to reuse logic for common tasks. For example, we may need to format dates in many places, so we extract a reusable function for that. This formatter function encapsulates stateless logic: it takes some input and immediately returns expected output. There are many libraries out there for reusing stateless logic - for example lodash and date-fns, which you may have heard of.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/reusability/composables.html'>Vue.js Composables</BadgeLink>
+
+<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=h8yveYCbFQM'>What is a Composable? (Vue 3)</BadgeLink>
+

content/roadmaps/105-vue/content/101-advanced-topics/readme.md

@@ -1 +1,3 @@
-# Advanced topics
+# Advanced Topics
+
+Now that you have covered the basics, next we have the advanced topics such as Async Components, Teleports, Provide/Inject, Custom Directives, Custom Events, Plugins, Watchers, Slots and more.