diff --git a/website/src/pages/plugins/typescript/typescript-vue-apollo.mdx b/website/src/pages/plugins/typescript/typescript-vue-apollo.mdx
index a5294925cb5..bd3efd43d1c 100644
--- a/website/src/pages/plugins/typescript/typescript-vue-apollo.mdx
+++ b/website/src/pages/plugins/typescript/typescript-vue-apollo.mdx
@@ -77,7 +77,7 @@ query allAccounts {
 }
 ```
 
-We can use the generated code with `useResult` like this:
+We can use the generated code with a watcher like this:
 
 ```vue
 <template>
@@ -91,20 +91,15 @@ We can use the generated code with `useResult` like this:
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-import { useResult } from '@vue/apollo-composable'
+ 
+<script setup lang="ts">
 import { useAllAccountsQuery } from '../generated/graphqlOperations'
-
-export default defineComponent({
-  setup() {
-    const { result, loading, error } = useAllAccountsQuery()
-    // Only select the property 'accounts' for use in the template
-    const allAccounts = useResult(result, null, data => data.accounts)
-    return { allAccounts, loading, error }
-  }
-})
+import { ref, watch } from 'vue'
+ 
+const { result, loading, error } = useAllAccountsQuery()
+const allAccounts = ref();
+// Only select the property 'accounts' for use in the template
+watch(result, data => allAccounts.value = data.accounts)
 </script>
 ```