以下のVuejs設定でのメリットやユースケースを教えてください

解決したいこと

他人の書いたコードを読んでいたのですが、
その中で使い方がわからない部分が出てきたので質問です。

だいたい3、4年前くらいに書かれたコードです。
もし、何か気づく点があればアドバイスいただけると助かります。
よろしくお願いします。

コード

let vms = [];
[...document.querySelectorAll("[data-vue]")].forEach(el => {
    const module = modules[el.dataset.vue];
    const vm = new Vue({el, ...module});
    vms.push(vm);
});

前提として

サイト自体はLaravelで構築、htmlで表示されており、
フロント部分の操作性を上げるためにVuejsが使われています。

上記のコードの前に「modules」として、
vuejsのvueファイル群をまとめたオブジェクトがあります。
オブジェクトのキーはファイルパスと一致しており、
以下のコードの「data-vue」とマッチさせられるようにしてます。

vueファイルは、ソースの取得・表示・操作まで、
それぞれ独立・完結した形になっておりました。
（これまで外からデータを注入するケースが無かった）

気になる点、問題点

• componentsにせず、data-vue毎にインスタンスを作るメリットがわからない
• propsみたいに値も渡せないし
• 同一のdata-vueが複数ある場合、vue情報が同一になる問題