diff --git a/docs/content/1.get-started/3.client.md b/docs/content/1.get-started/3.client.md
index 2af3d27..b0675ba 100644
--- a/docs/content/1.get-started/3.client.md
+++ b/docs/content/1.get-started/3.client.md
@@ -42,11 +42,21 @@ As you can see, we passed `AppRouter` as a type argument of `createTRPCNuxtClien
 <script setup lang="ts">
 const { $client } = useNuxtApp()
 
+// With composables
+
 const getUser = await $client.getUser.useQuery('id_bilbo');
 // => { data: { id: 'id_bilbo', name: 'Bilbo' }, pending: false, error: false };
 
+const createUser = await $client.createUser.useMutation();
+await createUser.mutate({ name: 'Frodo' });
+// => { data: { id: 'id_frodo', name: 'Frodo' }, pending: false, error: false };
+
+
+// With vanilla
+
 const bilbo = await $client.getUser.query('id_bilbo');
 // => { id: 'id_bilbo', name: 'Bilbo' };
+
 const frodo = await $client.createUser.mutate({ name: 'Frodo' });
 // => { id: 'id_frodo', name: 'Frodo' };
 </script>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index cfd160d..62f4d21 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -20,11 +20,9 @@ const addTodo = async () => {
     completed: false
   }
 
-  data.value.push(newData)
+  const result = await mutate(newData)
 
-  await mutate(newData)
-
-  await refreshNuxtData(todosKey)
+  data.value.push(result)
 }
 </script>