diff --git a/app/pages/index.vue b/app/pages/index.vue
index fbd598c..b9c80d2 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -39,15 +39,20 @@ const vueUsePackages = [
   '@vueuse/rxjs',
 ]
 
-function generateVueUseImportCDNs() {
-  return vueUsePackages.map((p) => {
-    return [p, `https://cdn.jsdelivr.net/npm/${p}@${vueuseVersion.value}/index.mjs`]
-  })
-}
+const { data: vueUseImportCDNs } = await useAsyncData(
+  'vueUseImportCDNs',
+  async () => {
+    const packageJson = await $fetch<{ module: string }>(`https://cdn.jsdelivr.net/npm/@vueuse/core@${vueuseVersion.value}/package.json`)
+    // module field possible values: './xx', 'xxx', '/xxx'
+    const entry = packageJson.module.replace(/^(\.\/|\/)+/, '')
+    return vueUsePackages.map(p => [p, `https://cdn.jsdelivr.net/npm/${p}@${vueuseVersion.value}/${entry}`])
+  },
+  { watch: [vueuseVersion], default: () => ([]) },
+)
 
 const importMap = computed(() => {
   return mergeImportMap(builtinImportMap.value, {
-    imports: Object.fromEntries([...generateVueUseImportCDNs(), ['vue-demi', 'https://cdn.jsdelivr.net/npm/vue-demi@0.14.10/lib/index.mjs'], ['yaml', 'https://cdn.jsdelivr.net/npm/yaml@2.7.1/+esm']]),
+    imports: Object.fromEntries([...vueUseImportCDNs.value, ['vue-demi', 'https://cdn.jsdelivr.net/npm/vue-demi@0.14.10/lib/index.mjs'], ['yaml', 'https://cdn.jsdelivr.net/npm/yaml@2.7.1/+esm']]),
   })
 })