Update shared-state.md

fixing the vue tabs

docs/cookbook/shared-state.md

@@ -24,21 +24,6 @@ With the mesh assigned to the reactive state, it's available throughout your pro
 
 ::: code-group
 
-```ts [composables/state.ts]
-import { reactive, toRefs } from "vue";
-
-const state = reactive({
-    mesh: null,
-    //you can add more objects here
-})
-
-export function useState() {
-    return {
-        ...toRefs(state)
-    }
-}
-```
-
 ```vue [App.vue]
 <script setup lang="ts">
 import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
@@ -71,6 +56,22 @@ const { mesh } = useState();
 </template>
 ```
 
+```ts [composables/state.ts]
+import { reactive, toRefs } from "vue";
+
+const state = reactive({
+    mesh: null,
+    //you can add more objects here
+})
+
+export function useState() {
+    return {
+        ...toRefs(state)
+    }
+}
+```
+:::
+
 ## Using TresMesh components
 
 You can also add TresMesh components to the reactive state. Here, we'll use a reference and assign it to the state when mounted.
@@ -151,4 +152,6 @@ onMounted(() => {
 </template>
 ```
 
+:::
+
 With these steps, you can easily manage and share objects across different components in your Vue 3 project using a reactive composable.