fixe typos

Author: bennobuilder

docs/examples/vue/examples/FirstCollection.mdx

@@ -7,4 +7,4 @@ slug: /examples/vue/first-collection
 
 import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
 
-<CodeSandBoxEmbed uri={'todo'} />
+<CodeSandBoxEmbed uri={'agilets-first-state-i5xxs'} />

docs/examples/vue/examples/FirstState.mdx

@@ -7,4 +7,4 @@ slug: /examples/vue/first-state
 
 import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
 
-<CodeSandBoxEmbed uri={'todo'} />
+<CodeSandBoxEmbed uri={'agilets-first-state-i5xxs'} />

docs/main/Frameworks.md

@@ -18,7 +18,7 @@ A quick overview of all frameworks that AgileTs supports or has planned to suppo
 | [React](https://reactjs.org)             | ✅        | -       |
 | [React-Native](https://reactnative.dev/) | ✅        | -       |
 | [Angular](https://angular.io/)           | ❌        | ✅      |
-| [Vue](https://vuejs.org/)                | ❌        | ✅      |
+| [Vue](https://vuejs.org/)                | 🟨       | ✅       |
 | [Svelte](https://svelte.dev/)            | ❌        | -       |
 
 ### 🤖 SSR-Frameworks

docs/packages/vue/Introduction.md

@@ -37,7 +37,7 @@ It also offers some other valuable functionalities that optimize the workflow us
 The `bindAgileInstances()` method binds/subscribes States to Vue Components.
 This binding ensures that the Component rerenders whenever a bound State mutates.
 We can flexibly bind any State to any Vue Component.
-```ts
+```ts {4-7}
 export default {
     name: 'MyComponent',
     data: function () {
@@ -49,11 +49,19 @@ export default {
     },
 };
 ```
-`bindAgileInstances()` returns a keymap object based on the passed State `value`.
-This keymap we merge into the `data` object, to access the State `values` in our `html` code like local Vue State.
-However, the AgileTs State `values` are under the `sharedState` property located
-to separate them a little from the local Vue States.
-```ts
+`bindAgileInstances()` returns a State value keymap based on the passed States.
+We merge the returned keymap into the `data` object
+to access the State `values` in the `html` code like we would local Vue States.
+```vue {3}
+<template>
+  <div id="app">
+    <p>myState: {{ sharedState.myState }}</p>
+  </div>
+</template>
+```
+Note that the AgileTs State `values` are under the `sharedState` property located
+to separate them from the local Vue States.
+```ts {4-7}
 const MY_STATE = App.createState('jeff');
 const MY_STATE_2 = App.createState('frank');
 
@@ -62,8 +70,10 @@ this.bindAgileInstances({
   myState2: MY_STATE_2,
 }); // Returns '{myState: 'jeff', mayState2: 'frank'}'
 ```
-We don't have to define separate keymap keys, if our State has already a valid key.
-```ts
+Instead of a States keymap we can also pass an array of States. 
+But keep in mind that then the passed States require a unique `key`
+to be properly mapped into the returned State `value` keymap.
+```ts {4-7}
 const MY_STATE = App.createState('jeff', {key: 'myState'});
 const MY_STATE_2 = App.createState('frank');
 
@@ -72,11 +82,15 @@ this.bindAgileInstances([
   MY_STATE_2,
 ]); // Returns '{myState: 'jeff'}'
 ```
-But if we use this variant, and the State has no key, it will be ignored.
+Passed States without a valid `key` are ignored 
+and won't be represented by the returned keymap.
+Thus, the State `value` isn't accessible in the `html` code, 
+and a State mutation rerender is triggered via. `vueComponent.forceRerender()`
+instead of mutating the `data` object.
 
 ### 🟦 Typescript
 
-The `bindAgileInstances` isn't typesafe. But we are working on it.
+The `bindAgileInstances` isn't typesafe yet. But we are working on it.
 
 ## 🚀 Quick Links
 - [Installation](./Installation.md)

docs/quick_start/Vue.md

@@ -8,7 +8,8 @@ slug: /quick-start/vue
 :::warning
 
 **The Vue integration is currently 'Work in Progress'**
-and hasn't yet been tested extensively! But as far as I can tell, it works quite good, with some type limitations.
+and hasn't yet been tested extensively! 
+But as far as I can tell, it works well, with some type limitations.
 
 :::
 
@@ -84,7 +85,7 @@ In summary, the main tasks of the `Agile Class` are to:
 
 ### 👨‍💻 Example {#example-1}
 
-To better understand how to use a State, we should view it in an example.
+To better understand how to use an Agile State in Vue, we should view it in an example.
 The sample project we'll look at is a small counter that lets us increase a number as we click the 'Update State' button.
 It may not be fascinating, but it shows all the essential pieces of a Vue + AgileTs application in action.
 After checking out the example, we recommend taking a look at the [Important Code Snippets Section](#important-code-snippets-1) below,
@@ -130,7 +131,7 @@ const MY_FIRST_STATE = App.createState("Hello World");
    }
 </script>
 ```
-Check out the [code sandbox](https://codesandbox.io/s/todo) to see the whole example in a production near environment.
+Check out the [code sandbox](https://codesandbox.io/s/agilets-first-state-i5xxs) to see the whole example in a production near environment.
 
 ### 💻 Important Code Snippets {#important-code-snippets-1}
 
@@ -168,7 +169,7 @@ Unfortunately, we haven't managed to make it typesafe yet. But we are working on
 4️⃣ After binding the States to the Vue Component (Step 3),
 we can access it like a local State in the `html` code.
 However, the AgileTs State `values` are under the `sharedState` property located
-to separate them a little from the local Vue States.
+to separate them from the local Vue States.
 
 ```ts
 MY_FIRST_STATE.set(`Hello World ${++helloWorldCount}`);