diff --git a/src/examples/src/fetching-data/App/composition.js b/src/examples/src/fetching-data/App/composition.js
index aff950285f..fd85480c3e 100644
--- a/src/examples/src/fetching-data/App/composition.js
+++ b/src/examples/src/fetching-data/App/composition.js
@@ -6,7 +6,7 @@ const branches = ['main', 'v2-compat']
 export default {
   setup() {
     const currentBranch = ref(branches[0])
-    const commits = ref(null)
+    const commits = ref([])
 
     watchEffect(async () => {
       // this effect will run immediately and then
diff --git a/src/examples/src/fetching-data/App/options.js b/src/examples/src/fetching-data/App/options.js
index eff25f1201..70128b9d09 100644
--- a/src/examples/src/fetching-data/App/options.js
+++ b/src/examples/src/fetching-data/App/options.js
@@ -4,7 +4,7 @@ export default {
   data: () => ({
     branches: ['main', 'v2-compat'],
     currentBranch: 'main',
-    commits: null
+    commits: []
   }),
 
   created() {
diff --git a/src/examples/src/fetching-data/App/template.html b/src/examples/src/fetching-data/App/template.html
index 4f54e05fd6..52009b099d 100644
--- a/src/examples/src/fetching-data/App/template.html
+++ b/src/examples/src/fetching-data/App/template.html
@@ -8,8 +8,8 @@ <h1>Latest Vue Core Commits</h1>
   <label :for="branch">{{ branch }}</label>
 </template>
 <p>vuejs/vue@{{ currentBranch }}</p>
-<ul>
-  <li v-for="{ html_url, sha, author, commit } in commits">
+<ul v-if="commits.length > 0">
+  <li v-for="{ html_url, sha, author, commit } in commits" :key="sha">
     <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
     - <span class="message">{{ truncate(commit.message) }}</span><br>
     by <span class="author">