Vueを組み込んだJSファイルから別のVueを組み込んだJSファイルのdataを引用したい。

連番のついたPNG形式のアイコンデータ数種類をVueのv-for={n in 10}のような形で複数のHTML上でズラッと書き出したいのですが、それぞれ数が異なり、増えるかもしれませんので、jsファイルの中で、Vueのdetaの中に登録して引用したいです。
それぞれのHTMLはVueを使ってそれぞれのjsファイルを読み込んで組んでいるので、アイコンデータ書き出し用のjsを作って読み込みたいと思います。

HTML1-JS1　┐
HTML2-JS2　┿　icon.js
HTML3-JS3　┘

↓アイコン管理用のjs(icon.js)

javascript
1new Vue({
2el:"#app",
3data:{
4  information:{
5    iconA: 12,//←数が増えたり減ったりしたら、ここだけ修正して各HTML上でも変更を反映させたい。
6    iconB: 6,//←数が増えたり減ったりしたら、ここだけ修正して各HTML上でも変更を反映させたい。
7    iconC: 8,//←数が増えたり減ったりしたら、ここだけ修正して各HTML上でも変更を反映させたい。
8　　　・
9　　　・
10　　　・
11   }
12}
13})

↓各HTMLのアイコン表示部分

HTML
1<div v-for="n in iconA">
2  <img :src="'../icon/iconA-' + n + '.png'">
3</div>
4
5<div v-for="n in iconB">
6  <img :src="'../icon/iconB-' + n + '.png'">
7</div>
8
9<div v-for="n in iconC">
10  <img :src="'../icon/iconC-' + n + '.png'">
11</div>

上記のような感じで二つの「Vueを組み込んだjsファイル」をHTMLで読み込むにはどのようにすればよいのでしょうか？

試したこと

まず、JS1.jsもinfo.jsも「el:"#app"」としてHTML上で、

のように二つのjsファイルを読み込んだらエラーで何も表示されなくなりました。

info.jsの方を「el:"#appinfo"」として、HTMLで<div id="appicon">を増やしてみましたが、これもエラーで表示が消えました。

importとexportについても調べてみたのですが、関数の引用での記事ばかりなのと、Vueでの使い方がいまいち理解できないのとで、うまくいきません。
どうかご教示お願いいたします。

動作確認環境はWin10、Google Chromeです。

ka2obushi

2021/10/23 05:48

- javascriptのコード欄に書かれているのはicon.jsの中身ということでしょうか？ - info.jsとは何でしょうか？ - 他のJS1.js等の中身やもっと外側のhtmlも提示してください。 - 「数が増えたらここだけ修正したい」の修正とはどういう意味でしょうか？

fungi

2021/10/23 06:56

分かりづらくて申し訳ありません。 info.jsはアイコンの個数管理用のJSのつもりで書いていました。 infoは分かりづらかったので、すべてiconに変更いたしました。各JS・HTMLはそれぞれ異なった操作をさせていて、内容もことなります。それぞれのページでイラストアイコンを表示させているのですが、アイコンの数が増えたとき、各HTMLのv-for="n in 12"とかv-for="n in 8"とかを、v-for="n in 13"とかv-for="n in 9"のように増やして変更しています。修正モレしてしまうこともあるので、アイコンの個数だけ管理するためのJSファイルを作って、変更を一本化したく思っています。なので、今あるHTMLに追加でVueの記述があるJSを読み込ませたいのですが、どちらか一方の「el:"#app"」しか認識されなくなっているようで、例えば、 <script src="JS1.js"></script> <script src="icon.js"></script> とすると、JS1.jsで設定したVueの中身が見つからなくなりました。試しにicon.jsの「el:"#app"」を「el:"#appicon"」などのように変えてみましたが、el:"#app"が見つからないエラーになってしまいました。 Vueは一つのファイルにまとめないと使えないのでしょうか？