diff --git a/examples/component-injection/pages/_slug.vue b/examples/component-injection/pages/_slug.vue
index 328917b95f..f94719fb99 100644
--- a/examples/component-injection/pages/_slug.vue
+++ b/examples/component-injection/pages/_slug.vue
@@ -1,16 +1,19 @@
 <template>
-  <BlogArticle/>
+  <component :is="comp"/>
 </template>
 
 <script>
+const components = {}
+const files = require.context('@/articles', false, /\.vue$/)
+files.keys().forEach((filename) => {
+  const name = filename.replace('./', '').replace('.vue', '')
+  components[name] = () => import('@/articles/' + name + '.vue').then((m) => m.default || m)
+})
+
 export default {
   async asyncData({ params, error }) {
-    const slug = params.slug || 'hello'
-    try {
-      this.components.BlogArticle = await import(`~/articles/${slug}.vue`)
-    } catch (e) {
-      error({ statusCode: 404, message: 'Article not found' })
-    }
-  }
+    return { comp: params.slug }
+  },
+  components
 }
 </script>
\ No newline at end of file