Vue でマクロ的なことをしたい

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

vue

1<script setup lang="ts"> 2import textA from "./a.txt?raw"; 3import textB from "./b.txt?raw"; 4import textC from "./c.txt?raw"; 5⋮ 6import textX from "./a.txt?raw"; 7import textY from "./b.txt?raw"; 8import textZ from "./c.txt?raw"; 9 10const a = { name: "a", text: textA }; 11const b = { name: "b", text: textB }; 12const c = { name: "c", text: textC }; 13⋮ 14const x = { name: "x", text: textX }; 15const y = { name: "y", text: textY }; 16const z = { name: "z", text: textZ }; 17</script> 18 19<template> 20 <Component1 v-bind="a"/> 21 <Component1 v-bind="b"/> 22 <Component1 v-bind="c"/> 23 ⋮ 24 <Component1 v-bind="x"/> 25 <Component1 v-bind="y"/> 26 <Component1 v-bind="z"/> 27</template>

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

js

1import config from "./config.json";2 3for (const item of config) {4 eval(`import text${item.name} from "${item.text}?raw";`);5 eval(`const ${item.name} = { name: "${item.name}", text: text${item.name} };`);6}

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