diff --git a/examples/app.html b/examples/app.html
index f045708e0..3403d5028 100644
--- a/examples/app.html
+++ b/examples/app.html
@@ -29,6 +29,7 @@ <h1>Chat example app!</h1>
     <p> {{message}} </p>
     <user-icon></user-icon>
     <chat-room topic="Example chat"></chat-room>
+
   </div>
 
 </body>
diff --git a/examples/composables.html b/examples/composables.html
index cda4fbb00..160ddb261 100644
--- a/examples/composables.html
+++ b/examples/composables.html
@@ -14,18 +14,19 @@
     }
   </script>
   <script type="module">
-    import {useUser, SEA, useRoom, useRelay} from "@gun-vue/composables"
+    import {useUser, SEA, useRoom, useRelay, vue} from "@gun-vue/composables"
     const {user, auth} = useUser()
     const {room} = useRoom()
     const {relay} = useRelay()
 
-    setTimeout(async () => {
-      await login()
+    vue.watchEffect(() => {
       document.getElementById('pubKey').innerText = user.pub
       document.getElementById('roomName').innerText = room.profile?.name
       document.getElementById('roomKey').innerText = room.pub
       document.getElementById('relay').innerText = relay.peer
-    }, 100)
+    })
+
+    await login()
 
     async function login() {
       if (user.is) return console.log('reused user')