Vite の静的アセット読み込みでマクロ的なことをしたい

Question

現在、Vite + Vue + TypeScript で大きい文書のようなものを作っています。そこでたくさんの（１００以上の）静的なテキストファイルを読み込んで JavaScript で処理をして HTML 要素に変換して Vue のコンポーネントの一部に埋め込んでいるのですが、

<script setup lang="ts">
import textA from "./a.txt?raw";
import textB from "./b.txt?raw";
import textC from "./c.txt?raw";
⋮
import textX from "./a.txt?raw";
import textY from "./b.txt?raw";
import textZ from "./c.txt?raw";

const a = { name: "a", text: textA };
const b = { name: "b", text: textB };
const c = { name: "c", text: textC };
⋮
const x = { name: "x", text: textX };
const y = { name: "y", text: textY };
const z = { name: "z", text: textZ };
</script>

<template>
  <Component1 v-bind="a"/>
  <Component1 v-bind="b"/>
  <Component1 v-bind="c"/>
  ⋮
  <Component1 v-bind="x"/>
  <Component1 v-bind="y"/>
  <Component1 v-bind="z"/>
</template>

こんな Vue ファイルが何十個もできそうで、同じような処理しかしないので JSON なんかに設定だけ書いて、Vue ファイルを生成するプログラムを書くか、

import config from "./config.json";

for (const item of config) {
  eval(`import text${item.name} from "${item.text}?raw";`);
  eval(`const ${item.name} = { name: "${item.name}", text: text${item.name} };`);
}

みたいなことをしたい気持ちになりましたが、上記のコードはもちろん動きません。Vue でマクロプログラミング的なことをしたいときに良い方法やツールはありますか？