Improve Vue.js Roadmap (#7498)

* Phase - 1

* Phase - 2

* Phase - 3

* Phase - 4

* Phase - 6

* Phase - 7 (Final)

* Update src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md

* Update src/data/roadmaps/vue/content/v-else@0CtAZQcFJexMiJfZ-mofv.md

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

src/data/roadmaps/vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md

@@ -5,3 +5,4 @@ There are several options available to make API calls from your Vue.js applicati
 Visit the following resources to learn more:
 
 - [@article@How To Make API calls in Vue.JS Applications](https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86)
+- [@article@How to Use RapidAPI Client with Vue.js](https://rapidapi.com/guides/fetch-api-with-vue)

src/data/roadmaps/vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md

@@ -4,8 +4,8 @@ Apollo is a platform for building a unified graph, a communication layer that he
 
 Visit the following resources to learn more:
 
-- [@article@Apollo Website](https://www.apollographql.com)
+- [@official@Apollo Website](https://www.apollographql.com)
-- [@article@Official Docs](https://www.apollographql.com/docs/)
+- [@official@Apollo Docs](https://www.apollographql.com/docs/)
-- [@video@Official YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/)
+- [@video@Apollo's YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/)
 - [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY)
 - [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh)

src/data/roadmaps/vue/content/app-configurations@qRm08uDZW-D8QDc-9sPX8.md

@@ -4,5 +4,4 @@ Every application instance exposes a `config` object that contains the configura
 
 Visit the following resources to learn more:
 
-- [@article@Official Documentation](https://vuejs.org/api/application.html#app-config)
+- [@official@Vue.js Documentation](https://vuejs.org/api/application.html#app-config)
-- [@article@official API Documentation](https://vuejs.org/api/application.html)

src/data/roadmaps/vue/content/async-components@Re7tv1U0LxYqE5ShFxQSf.md

@@ -4,4 +4,4 @@ In large applications, we may need to divide the app into smaller chunks and onl
 
 Visit the following resources to learn more:
 
-- [@article@Async Components](https://vuejs.org/guide/components/async.html)
+- [@official@Async Components](https://vuejs.org/guide/components/async.html)

src/data/roadmaps/vue/content/attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md

@@ -4,4 +4,4 @@ Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that a
 
 Visit the following resources to learn more:
 
-- [@article@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
+- [@official@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)

src/data/roadmaps/vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md

@@ -1,11 +1,9 @@
 # Axios
 
-The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
+Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
-
-Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.
 
 Visit the following resources to learn more:
 
-- [@article@Axios Getting Started](https://axios-http.com/docs/intro)
+- [@official@Getting Started with Axios](https://axios-http.com/docs/intro)
 - [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why)
 - [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh)

src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md

@@ -1 +1,8 @@
 # Binding Events
+
+Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind events using the v-on directive or its shorthand, the @ symbol.
+
+Visit the following resources to learn more:
+
+- [@official@Binding Events](https://vuejs.org/guide/essentials/event-handling)
+- [@article@Vue.js Event Handling](https://www.geeksforgeeks.org/vue-js-event-handling/)

src/data/roadmaps/vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md

@@ -4,5 +4,5 @@ Since Vue.js is a web framework, it does not natively support mobile app develop
 
 Visit the following resources to learn more:
 
-- [@article@Building cross-platform apps with Capacitor and Vue.js](https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/)
+- [@article@Building Cross-Platform Apps with Capacitor and Vue.js](https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/)
 - [@article@Building Mobile Apps With Capacitor And Vue.js](https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/)

src/data/roadmaps/vue/content/component-registration@2HhKifjuDcP3eKpanRMEQ.md

@@ -4,4 +4,4 @@ A Vue component needs to be "registered" so that Vue knows where to locate its i
 
 Visit the following resources to learn more:
 
-- [@article@Component Registration](https://vuejs.org/guide/components/registration.html)
+- [@official@Component Registration](https://vuejs.org/guide/components/registration.html)

src/data/roadmaps/vue/content/components@0EevuyZiyty3X3Jzpjl4y.md

@@ -4,5 +4,5 @@ Components allow us to split the UI into independent and reusable pieces, and th
 
 Visit the following resources to learn more:
 
-- [@article@Components Basics](https://vuejs.org/guide/essentials/component-basics.html)
+- [@official@Components Basics](https://vuejs.org/guide/essentials/component-basics.html)
-- [@article@Components in Depth](https://vuejs.org/guide/components/registration.html)
+- [@official@Components in Depth](https://vuejs.org/guide/components/registration.html)

src/data/roadmaps/vue/content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md

@@ -4,8 +4,8 @@ With the release of Vue 3, developers now have access to the Composition API, a
 
 Visit the following resources to learn more:
 
-- [@article@TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)
+- [@official@TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)
-- [@article@Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)
+- [@official@Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)
-- [@article@Composition API](https://vuejs.org/api/#composition-api)
+- [@official@Composition API](https://vuejs.org/api/#composition-api)
 - [@article@Vue 3 Composition API](https://www.thisdot.co/blog/vue-3-composition-api-ref-and-reactive)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)

src/data/roadmaps/vue/content/computed-properties@Bx1Atxcf15AEaA1BiSIc6.md

@@ -4,4 +4,4 @@ In-template expressions are very convenient, but they are meant for simple opera
 
 Visit the following resources to learn more:
 
-- [@article@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)
+- [@official@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)

src/data/roadmaps/vue/content/conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md

@@ -4,4 +4,4 @@ The directive `v-if` is used to conditionally render a block. The block will onl
 
 Visit the following resources to learn more:
 
-- [@article@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)
+- [@official@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)

src/data/roadmaps/vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md

@@ -1,8 +1,9 @@
 # create-vue
 
-[create-vue](https://github.com/vuejs/create-vue) is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.
+create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.
 
 Learn more using the following resources:
 
-- [@article@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html)
+- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue)
+- [@official@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)

src/data/roadmaps/vue/content/custom-directives@br1r8KIf5KInY5mk2xhA6.md

@@ -1,7 +1,9 @@
 # Custom Directives
 
-So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
+So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
 
 Visit the following resources to learn more:
 
-- [@article@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html)
+- [@official@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html)
+- [@official@Composables](https://vuejs.org/guide/reusability/composables.html)
+- [@official@Components](https://vuejs.org/guide/essentials/component-basics.html)

src/data/roadmaps/vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md

@@ -4,7 +4,7 @@ Cypress framework is a JavaScript-based end-to-end testing framework built on to
 
 Visit the following resources to learn more:
 
-- [@official@Official Website](https://www.cypress.io/)
+- [@official@Cypress Website](https://www.cypress.io/)
-- [@article@Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other)
+- [@official@Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other)
 - [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE)
 - [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh)

src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md

@@ -1 +1,7 @@
 # Debugging
+
+Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
+
+Visit the following resources to learn more:
+
+- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)

src/data/roadmaps/vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md

@@ -1,7 +1,8 @@
 # Directives
 
-Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html).
+Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives.
 
 Visit the following resources to learn more:
 
-- [@article@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives)
+- [@official@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives)
+- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html)

src/data/roadmaps/vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md

@@ -4,5 +4,5 @@ Element UI is another Vue.js component library with several built-in components
 
 Visit the following resources to learn more:
 
-- [@article@Official Website](https://element-plus.org/en-US/)
+- [@official@Element UI Website](https://element-plus.org/en-US/)
-- [@article@Official Getting Started](https://element-plus.org/en-US/guide/design.html)
+- [@official@Getting Started - Element UI](https://element-plus.org/en-US/guide/design.html)

src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md

@@ -1 +1,7 @@
 # Error / Warn Handler
+
+Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
+
+Visit the following resources to learn more:
+
+- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)

src/data/roadmaps/vue/content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md

@@ -4,4 +4,4 @@ When you build a dynamic website with Vue you'll most likely want it to be able
 
 Visit the following resources to learn more:
 
-- [@article@Event Handling in Vue.js](https://vuejs.org/guide/essentials/event-handling.html)
+- [@official@Event Handling in Vue.js](https://vuejs.org/guide/essentials/event-handling.html)

src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md

@@ -1 +1,7 @@
 # Event Modifiers
+
+In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions.
+
+Visit the following resources to learn more:
+
+- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/)

src/data/roadmaps/vue/content/events@X0J3ogH3W8EQe68tLfcGL.md

@@ -4,5 +4,5 @@ As we develop our applications we may need to communicate with the parent compon
 
 Visit the following resources to learn more:
 
-- [@article@Listening to Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events)
+- [@official@Listening to Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events)
-- [@article@Events in Detail](https://vuejs.org/guide/components/events.html)
+- [@official@Events in Detail](https://vuejs.org/guide/components/events.html)

src/data/roadmaps/vue/content/fetch@ufnt87swK61kxShLuVc1-.md

@@ -1,9 +1,9 @@
 # Fetch
 
-The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
+The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
 
 Visit the following resources to learn more:
 
-- [@article@Fetch MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+- [@article@Fetch - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 - [@article@Fetch W3school Docs](https://www.w3schools.com/jsref/api_fetch.asp)
-- [@article@Network request - Fetch](https://javascript.info/fetch)
+- [@article@Network Request - Fetch](https://javascript.info/fetch)

src/data/roadmaps/vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md

@@ -5,4 +5,3 @@ FormKit helps build forms faster by simplifying form structure, generation, vali
 Visit the following resources to learn more:
 
 - [@official@Formkit Documentation](https://formkit.com/)
-

src/data/roadmaps/vue/content/forms-handling@PQu4TyJOfCEaafW5th0e4.md

@@ -4,6 +4,6 @@ You can use the `v-model` directive to create two-way data bindings on form inpu
 
 Visit the following resources to learn more:
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
 - [@video@Vue JS 3 Tutorial - Form Handling](https://www.youtube.com/watch?v=T-AE-GtSlN4)
 - [@article@A complete guide to forms in Vue.js](https://blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-2/)

src/data/roadmaps/vue/content/forms@izGdctxP_OvQNvaMwVIrh.md

@@ -4,5 +4,5 @@ Apart from the built-in form-binding support, there are several options availabl
 
 Visit the following resources to learn more:
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
 - [@article@User Inputs in Vue 3](https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs)

src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md

@@ -1 +1,7 @@
 # Global Properties
+
+Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.
+
+Visit the following resources to learn more:
+
+- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/)

src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md

@@ -1 +1,7 @@
 # Inline / Method Handlers
+
+In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability.
+
+Visit the following resources to learn more:
+
+- [@official@Method Handlers](https://v1.vuejs.org/guide/events.html)

src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md

@@ -1 +1,7 @@
 # Input Bindings
+
+Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
+
+Visit the following resources to learn more:
+
+- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms)

src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md

@@ -1 +1,7 @@
 # Key Modifiers
+
+Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
+
+Visit the following resources to learn more:
+
+- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms)

src/data/roadmaps/vue/content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md

@@ -4,6 +4,6 @@ Each Vue component instance goes through a series of initialization steps when i
 
 Visit the following resources to learn more:
 
-- [@article@Life Cycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
+- [@official@Life Cycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
 - [@article@The Lifecycles of Vue.js](https://dev.to/amolikvivian/the-lifecycles-of-vue-js-lhh)
 - [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh)

src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md

@@ -1 +1,7 @@
 # Modifiers
+
+Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful.
+
+Visit the following resources to learn more:
+
+- [@official@Modifiers](https://v2.vuejs.org/v2/guide/components-custom-events.html)

src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md

@@ -1 +1,7 @@
 # Mouse Button Modifiers
+
+Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks.
+
+Visit the following resources to learn more:
+
+- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8)

src/data/roadmaps/vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md

@@ -6,7 +6,7 @@ Visit the following resources to learn more:
 
 - [@official@Nuxt Website](https://nuxt.com/)
 - [@official@Nuxt Docs](https://nuxt.com/docs/getting-started/introduction)
+- [@official@Nuxt Examples](https://nuxt.com/docs/examples/essentials/hello-world)
 - [@article@Get Started with Nuxt](https://explorers.netlify.com/learn/get-started-with-nuxt)
 - [@article@Nuxt.js Fundamentals](https://vueschool.io/courses/nuxtjs-fundamentals)
-- [@official@Nuxt Examples](https://nuxt.com/docs/examples/essentials/hello-world)
 - [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)

src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md

@@ -4,4 +4,4 @@ Optimizing rendering is crucial for ensuring a smooth and efficient user experie
 
 Learn more from the following resources:
 
-- [@article@Optimizing rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/)
+- [@article@Optimizing Rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/)

src/data/roadmaps/vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md

@@ -1,10 +1,8 @@
 # Options API
 
-We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted.
+We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.
-
-To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.
 
 Visit the following resources to learn more:
 
-- [@article@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
+- [@official@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
-- [@article@Options API Documentation](https://vuejs.org/api/#options-api)
+- [@official@Options API Documentation](https://vuejs.org/api/#options-api)

src/data/roadmaps/vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md

@@ -4,5 +4,5 @@ Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with th
 
 Visit the following resources to learn more:
 
-- [@article@Official Documentation](https://pinia.vuejs.org/)
+- [@official@Pinia Documentation](https://pinia.vuejs.org/)
 - [@video@Learn Pinia in 30Minutes](https://www.youtube.com/watch?v=JGC7aAC-3y8)

src/data/roadmaps/vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md

@@ -4,5 +4,5 @@ Playwright Test was created specifically to accommodate the needs of end-to-end
 
 Visit the following resources to learn more:
 
-- [@official@Official Website: Playwright](https://playwright.dev/)
+- [@official@Playwright Website](https://playwright.dev/)
 - [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)

src/data/roadmaps/vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md

@@ -4,5 +4,5 @@ Plugins are self-contained code that usually add app-level functionality to Vue.
 
 Visit the following resources to learn more:
 
-- [@article@Plugins in Vue.js](https://vuejs.org/guide/reusability/plugins.html)
+- [@official@Plugins in Vue.js](https://vuejs.org/guide/reusability/plugins.html)
 - [@article@How to Write Your Own Vue.js Plugin](https://www.linode.com/docs/guides/how-to-write-vue-js-plugins/)

src/data/roadmaps/vue/content/props@raEfI4GLMW2fOucka07VE.md

@@ -6,5 +6,5 @@ Props are custom attributes you can register on a component.
 
 Visit the following resources to learn more:
 
-- [@article@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props)
+- [@official@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props)
-- [@article@Props in Depth](https://vuejs.org/guide/components/props.html)
+- [@official@Props in Depth](https://vuejs.org/guide/components/props.html)

src/data/roadmaps/vue/content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md

@@ -4,4 +4,4 @@ Usually, when we need to pass data from the parent to a child component, we use
 
 Visit the following resources to learn more:
 
-- [@article@Provide / Inject in Vue.js](https://vuejs.org/guide/components/provide-inject.html)
+- [@official@Provide / Inject in Vue.js](https://vuejs.org/guide/components/provide-inject.html)

src/data/roadmaps/vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md

@@ -4,6 +4,6 @@ Quasar Framework is an open-source Vue.js based framework for building apps, wit
 
 Visit the following resources to learn more:
 
-- [@official@Official Website: Quasar](https://quasar.dev/)
+- [@official@Quasar](https://quasar.dev/)
 - [@video@Quasar Framework: Vue.js Cross Platform App](https://www.youtube.com/watch?v=opmng7llVJ0&list=PLAiDzIdBfy8iu_MZrq3IPuSFcRgCQ0iL0)
 - [@video@How to Build an App using Quasar Framework](https://www.youtube.com/watch?v=czJIuHyPPXo)

src/data/roadmaps/vue/content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md

@@ -4,4 +4,4 @@ We can use the `v-for` directive to render a list of items based on an array. Th
 
 Visit the following resources to learn more:
 
-- [@article@Rendering Lists in Vue.js](https://vuejs.org/guide/essentials/list.html)
+- [@official@Rendering Lists in Vue.js](https://vuejs.org/guide/essentials/list.html)

src/data/roadmaps/vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md

@@ -1,3 +1,8 @@
 # Routing
 
 Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.
+
+Visit the following resources to learn more:
+
+- [@official@Routing in Vue.js](https://vuejs.org/guide/scaling-up/routing.html)
+- [@official@The Vue Router](https://router.vuejs.org/)

src/data/roadmaps/vue/content/single-file-components@VNBRlJkdH6NOOzGXUrbZK.md

@@ -4,4 +4,4 @@ Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as SFC) is a speci
 
 Visit the following resources to learn more:
 
-- [@article@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html)
+- [@official@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html)

src/data/roadmaps/vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md

@@ -4,4 +4,4 @@ In some cases, we may want to pass a template fragment to a child component, and
 
 Visit the following resources to learn more:
 
-- [@article@Slots in Vue.js](https://vuejs.org/guide/components/slots.html)
+- [@official@Slots in Vue.js](https://vuejs.org/guide/components/slots.html)

src/data/roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md

@@ -4,7 +4,7 @@ A static site generator is a tool that generates a full static HTML website base
 
 Visit the following resources to learn more:
 
-- [@article@What is a static site generator?](https://www.cloudflare.com/learning/performance/static-site-generator/)
+- [@article@What is a Static Site Generator?](https://www.cloudflare.com/learning/performance/static-site-generator/)
 - [@article@Next.js SSG](https://nextjs.org/docs/advanced-features/static-html-export)
 - [@article@Gatsby SSG](https://www.gatsbyjs.com/docs/glossary/static-site-generator/)
 - [@article@SSG — An 11ty, Vite And JAM Sandwich](https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/)

src/data/roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md

@@ -4,9 +4,8 @@ Server-side rendering refers to the process that the service side completes the
 
 Visit the following resources to learn more:
 
-- [@article@what is server side rendering](https://www.educative.io/answers/what-is-server-side-rendering)
+- [@article@What is Server Side Rendering (SSR)?](https://www.educative.io/answers/what-is-server-side-rendering)
 - [@article@When should I Server-Side Render?](https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f)
 - [@article@Server-Side Rendering (SSR)](https://vuejs.org/guide/scaling-up/ssr.html)
-- [@video@what is server side rendering?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+- [@video@What is Server Side Rendering (SSR) for Web Development?](https://www.youtube.com/watch?v=okvg3MRAPs0)
-- [@video@What is server-side rendering for web development?](https://www.youtube.com/watch?v=okvg3MRAPs0)
 - [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh)

src/data/roadmaps/vue/content/state-management@9AwVtwIv6TfP9F4ulz2F0.md

@@ -4,4 +4,5 @@ Application state management is the process of maintaining knowledge of an appli
 
 Visit the following resources to learn more:
 
+- [@official@State Management](https://vuejs.org/guide/scaling-up/state-management.html)
 - [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)

src/data/roadmaps/vue/content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md

@@ -4,4 +4,4 @@ TanStack Query is a data fetching and caching library for Vue.js and React. It i
 
 Visit the following resources to learn more:
 
-- [@official@Official Website](https://tanstack.com/query)
+- [@official@Tanstack Query Website](https://tanstack.com/query)

src/data/roadmaps/vue/content/teleport-components@SGsd08ZTu4H76s8cfbCKe.md

@@ -4,4 +4,4 @@ Sometimes we may run into the following scenario: a part of a component's templa
 
 Visit the following resources to learn more:
 
-- [@article@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html)
+- [@official@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html)

src/data/roadmaps/vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md

@@ -4,4 +4,4 @@ Vue uses an HTML-based template syntax that allows you to declaratively bind the
 
 Visit the following resources to learn more:
 
-- [@article@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html)
+- [@official@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html)

src/data/roadmaps/vue/content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md

@@ -4,4 +4,4 @@
 
 Visit the following resources to learn more:
 
-- [@article@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html)
+- [@official@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html)

src/data/roadmaps/vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md

@@ -7,4 +7,4 @@ Vue offers two built-in components that can help work with transitions and anima
 
 Visit the following resources to learn more:
 
-- [@article@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition)
+- [@official@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition)

src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md

@@ -1,11 +1,10 @@
 # v-bind
 
-The `v-bind` directive dynamically binds an HTML attribute to data.
+The `v-bind` directive dynamically binds an HTML attribute to data. The shorthand for this directive is `:`
 
-The shorthand for this directive is `:`
+## Example
 
-Example:
+```html
-```vue
 <script setup>
   import { ref } from 'vue';
   const image_url = ref("path/to/image.png")
@@ -18,4 +17,4 @@ Example:
 
 Visit the following resources for more information:
 
-- [@official@v-bind documentation](https://vuejs.org/api/built-in-directives.html#v-bind)
+- [@official@v-bind Documentation](https://vuejs.org/api/built-in-directives.html#v-bind)

src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md

@@ -1,22 +1,23 @@
 # v-cloak
 
-The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template
+The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.
 
-The v-cloak directive remains until the component instance is mounted.
+```html
-```vue
 <div v-cloak>
   {{ message }}
 </div>
 ```
 
 Combined with CSS, you can hide elements with v-cloak until they are ready.
+
 ```css
 [v-cloak] {
   display: none;
 }
 ```
+
 The `<div>` will not be visible until the compilation is done.
 
 Visit the following resources to learn more:
 
-- [@official@v-cloak documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)
+- [@official@v-cloak Documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)

src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md

@@ -3,4 +3,5 @@
 This directive is used to add additional conditions to a v-if and v-else block.
 
 Visit the following resources to learn more:
+
 - [@official@v-else-if Documentation](https://vuejs.org/api/built-in-directives.html#v-else-if)

src/data/roadmaps/vue/content/v-else@0CtAZQcFJexMiJfZ-mofv.md

@@ -2,6 +2,7 @@
 
 The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.
 
+
 Visit the following resources for more information:
 
-- [@official@v-else documentation](https://vuejs.org/api/built-in-directives.html#v-else)
+- [@official@v-else Documentation](https://vuejs.org/api/built-in-directives.html#v-else)

src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md

@@ -1,11 +1,11 @@
 # v-for
 
 The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times.
-When using this directive it is important to assign a unique key to each item to avoid issues and improve perfomance.
+When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the `item in items` syntax.
-This directive follows the `item in items` syntax.
 
-Example:
+## Example
-```vue
+
+```html
 <script setup>
   import { ref } from 'vue';
   const foods = ref([
@@ -22,4 +22,4 @@ Example:
 
 Visit the following resources to learn more:
 
-- [@official@v-for documentation](https://vuejs.org/guide/essentials/list#v-for)
+- [@official@v-for Documentation](https://vuejs.org/guide/essentials/list#v-for)

src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md

@@ -1,9 +1,10 @@
 # v-html
 
-The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicius JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
+The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicious JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
 
-Example:
+## Example
-```vue
+
+```html
 <template>
   <p v-html="'<h1>Text</h1>'"></p>
 </template>
@@ -11,4 +12,4 @@ Example:
 
 Visit the following resources to learn more:
 
-- [@official@v-html documentation](https://vuejs.org/api/built-in-directives.html#v-html)
+- [@official@v-html Documentation](https://vuejs.org/api/built-in-directives.html#v-html)

src/data/roadmaps/vue/content/v-if@xHj3W9Ig3MVuVlGyXchaP.md

@@ -1,8 +1,12 @@
 # v-if
 
-Conditionally render an element or a template fragment based on the truthy-ness of the expression value.
+Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
 
-When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
+## Example
+
+```html
+<h1 v-if="awesome">Vue is awesome!</h1>
+```
 
 Visit the following resources to learn more:
 

src/data/roadmaps/vue/content/v-model@cxu2Wbt306SxM4JKQQqnL.md

@@ -2,4 +2,4 @@
 
 The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

src/data/roadmaps/vue/content/v-model@gMFndBcrTC6FtGryqN6dX.md

@@ -1,5 +1,5 @@
 # v-model
 
-The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as <input>, <textarea>, and <select>. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
+The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
 
-- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)

src/data/roadmaps/vue/content/v-model@swpyZFUO4UO3mW8Bvf1Te.md

@@ -2,7 +2,6 @@
 
 v-model is a directive that allows you to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
 
-
 Visit the following resources to learn more:
 
-- [@article@Vue.js Guide](https://vuejs.org/guide/components/v-model.html#component-v-model)
+- [@official@Vue.js Guide](https://vuejs.org/guide/components/v-model.html#component-v-model)

src/data/roadmaps/vue/content/v-on@hVuRmhXVP65IPtuHTORjJ.md

@@ -1 +1,7 @@
 # v-on
+
+The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.
+
+Visit the following resources to learn more:
+
+- [@article@v-on Directive](https://www.w3schools.com/vue/ref_v-on.php)

src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md

@@ -2,8 +2,9 @@
 
 The `v-once` directive makes an HTML element render only once, skipping every future update.
 
-Example:
+## Example
-```vue
+
+```html
 <script setup>
   import { ref } from 'vue';
   const input = ref("Some Text");
@@ -14,8 +15,9 @@ Example:
   <p v-once>{{ input }}</p>
 </template>
 ```
+
 In this example the **p** element will not change its text even if the input variable is changed through the **input** element.
 
 Visit the following resources to learn more:
 
-- [@official@v-once documentation](https://vuejs.org/api/built-in-directives.html#v-once)
+- [@official@v-once Documentation](https://vuejs.org/api/built-in-directives.html#v-once)

src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md

@@ -2,8 +2,9 @@
 
 The `v-pre` directive makes an element render its content as-is, skipping its compilation. The most common use case is when displaying raw mustache syntax.
 
-Example:
+## Example
-```vue
+
+```html
 <script setup>
   import { ref } from 'vue';
   const text = ref("Some Text")
@@ -13,6 +14,7 @@ Example:
   <p v-pre >{{ text }}</p>
 </template>
 ```
+
 The **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.
 
 Visit the following resources to learn more:

src/data/roadmaps/vue/content/v-show@_TlbGTKFCMO0wdLbC6xHX.md

@@ -1,9 +1,7 @@
 # v-show
 
-`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`.
+`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.
-
-Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.
 
 Visit the following resources to learn more:
 
-- [@official@Vue Conditional Rendering Docs](https://vuejs.org/guide/essentials/conditional.html#v-show)
+- [@official@Vue Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html#v-show)

src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md

@@ -4,7 +4,7 @@ The v-slot directive to define slots in components, allowing you to pass and ren
 
 For named slots, you use v-slot with a specific slot name. This lets you pass different content to different parts of a component:
 
-```vue
+```html
 <template>
   <custom-component>
     <template v-slot:header>

src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md

@@ -3,8 +3,9 @@
 The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element.
 The expected input is a string, so it's important to wrap any text in single quotes.
 
-Example:
+## Example
-```vue
+
+```html
 <template>
   <p v-text="'I am some text'"></p>
 </template>
@@ -12,4 +13,4 @@ Example:
 
 Visit the following resources to learn more:
 
-- [@official@v-text documentation](https://vuejs.org/api/built-in-directives.html#v-text)
+- [@official@v-text Documentation](https://vuejs.org/api/built-in-directives.html#v-text)

src/data/roadmaps/vue/content/vee-validate@_Fmp8_z4SKWfKUE80_fqb.md

@@ -4,5 +4,5 @@ OpenSource plugin to handle form validations in Vue.js
 
 Visit the following resources to learn more:
 
-- [@article@Official Website: Vee Validate](https://vee-validate.logaretm.com/v4/)
 - [@opensource@logarem/vee-validate](https://github.com/logaretm/vee-validate)
+- [@official@Vee Website: Vee Validate](https://vee-validate.logaretm.com/v4/)

src/data/roadmaps/vue/content/vitepress@_46COO0FGaFuCYwqaRRWy.md

@@ -4,4 +4,4 @@ Vitepress is a static site generator that is built on top of Vite. It is a light
 
 Visit the following resources to learn more:
 
-- [@official@Official Website](https://vitepress.dev/)
+- [@official@Vitepress Website](https://vitepress.dev/)

src/data/roadmaps/vue/content/vitest@LjEAviRMtPLwUUlfcof1h.md

@@ -1,7 +1,6 @@
 # Vitest
 
-Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support.
+Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support. It Works on React, Vue, Svelte and more projects created with Vite.
-Works on React, Vue, Svelte and more projects created with Vite
 
 Visit the following resources to learn more:
 

src/data/roadmaps/vue/content/vue-router@COxkmvqe9jFtV9WtGjfbh.md

@@ -4,6 +4,6 @@ Vue Router is the official router for Vue.js which allows creating static/dynami
 
 Visit the following resources to learn more:
 
-- [@article@Vue Router](https://router.vuejs.org/)
+- [@official@The Vue Router](https://router.vuejs.org/)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
 - [@video@The Vue Router](https://www.youtube.com/watch?v=juocv4AtrHo)

src/data/roadmaps/vue/content/vue-testing-library@p5bUvgr_3H-A55ZnEExk8.md

@@ -4,5 +4,5 @@ The Vue Testing Library is a very lightweight solution for testing Vue component
 
 Visit the following resources to learn more:
 
-- [@article@Getting Started with Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)
+- [@official@Getting Started with Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/vue/content/vuelidate@6U_CAhAY_jyj_4Mzj_HL_.md

@@ -4,5 +4,5 @@ Simple, lightweight model-based validation for Vue.js.
 
 Visit the following resources to learn more:
 
-- [@article@Official Website: Vuelidate](https://vuelidate.js.org/)
+- [@official@Vuelidate Website](https://vuelidate.js.org/)
 - [@opensource@vuelidate/vuelidate](https://github.com/vuelidate/vuelidate)

src/data/roadmaps/vue/content/vuetify@VNclt_QQthWb2u4xWI_uY.md

@@ -4,7 +4,7 @@ Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No
 
 Visit the following resources to learn more:
 
-- [@article@Official Website](https://vuetifyjs.com/en/)
+- [@official@Vuetify Website](https://vuetifyjs.com/en/)
-- [@article@Getting started with Vuetify](https://vuetifyjs.com/en/getting-started/installation/)
+- [@official@Getting Started with Vuetify](https://vuetifyjs.com/en/getting-started/installation/)
 - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
 - [@video@Vuetify: Create an App with Vue JS - in 30 MINUTES!](https://www.youtube.com/watch?v=CjXgoYo86yY)

src/data/roadmaps/vue/content/vueuse@Z9szBPFXfqK_KsvzkR-rf.md

@@ -4,5 +4,4 @@ VueUse is a collection of utility functions based on Composition API. It has ove
 
 Visit the following resources to learn more:
 
-- [@official@Official Website - VueUse](https://vueuse.org/)
+- [@official@VueUse](https://vueuse.org/)
-

src/data/roadmaps/vue/content/watchers@kdlXhbw_a81xdZtyK-pVa.md

@@ -1,9 +1,7 @@
 # Watchers
 
-Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation.
+Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.
-
-With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.
 
 Visit the following resources to learn more:
 
-- [@article@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html)
+- [@official@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html)