Added v-cloak and v-slot content on Vue roadmap (#7161)

* Add v-cloak description

Added v-cloak content in Vue roadmap

* Add v-slot description

Added v-slot content in Vue roadmap

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

@@ -1 +1,22 @@
-# v-cloak
+# 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 remains until the component instance is mounted.
+```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)

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

@@ -1 +1,24 @@
-# v-slot
+# v-slot
+
+The v-slot directive to define slots in components, allowing you to pass and render content dynamically inside a component.
+
+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
+<template>
+  <custom-component>
+    <template v-slot:header>
+      <h1>Header Content</h1>
+    </template>
+    <template v-slot:footer>
+      <p>Footer Content</p>
+    </template>
+  </custom-component>
+</template>
+```
+
+The shorthand for `v-slot` is `#`, for example `v-slot:header` becomes `#header`.
+
+Visit the following resources to learn more:
+
+- [@official@v-slot documentation](https://vuejs.org/api/built-in-directives.html#v-slot)