diff --git a/src/pages/data-loaders.[id]/sub-1.[userId].page.vue b/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
index a01c4fa..c427a6a 100644
--- a/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
+++ b/src/pages/data-loaders.[id]/sub-1.[userId].page.vue
@@ -9,7 +9,7 @@ async function getUserById(userId: string, { signal }: { signal?: AbortSignal })
   }, 1000 * 10);
   const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, { signal });
   await new Promise((resolve) => setTimeout(resolve, 300));
-  return await res.json();
+  return (await res.json()) as Record<string, unknown>;
 }
 
 export const useUserData = defineColadaLoader('DataLoadersIdSub1UserId', {
@@ -62,14 +62,15 @@ const route = useRoute('DataLoadersIdSub1UserId');
   </div>
 
   <h2>State</h2>
-
+  <!-- user 是 ShallowRef 的，所以修改 user 的属性不会触发重新渲染 -->
+  <button @click="user.name = 'Changed name'">Change user data</button>
   <p>
     <code>status: {{ status }}</code>
     <br />
     <code>isLoading: {{ isLoading }}</code>
   </p>
   <pre v-if="error">Error: {{ error }}</pre>
-  <pre v-else>{{ user == null ? String(user) : user }}</pre>
+  <pre v-else>user: <p>{{ user == null ? String(user) : user }}</p></pre>
 </template>
 
 <style scoped lang="less">