Herkese ilgisi ve yardımları için teşekkür ederim.
Gökhan Kandemir'in videolarından izlediğim kadarı ile kavramaya çalışıyorum.
Html sayfasına dahil ederek yapmak istiyordum.
Şimdi web sitesine baktığım da benim kullandığımdan farklı bir kullanım mevcut.
Sizin önerilerinize benziyor. Ama jsfiddle örneklerine baktım orada denememde çalışmadı ya da beceremedim.

Örnek: https://jsfiddle.net/TrSherlock/msayL02n/8/

Sanırsam bir şeyi gözden kaçırıyorum?
Çok hakim olmadığım bir konu.
For ve bir şey değiştiğinde her şeyin değişmesi hoşuma gitmişti.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="earsivXML.js"></script>
<div id="ebelge">
        <div class="h-[100vh] bg-gradient-to-b from-[#1fa2ff] to-[#12d8fa] to-[#a6ffcb]">
            <div>
                <input type="text" v-model="invoices?.[0]?.evrakNo">
                <input type="file" multiple accept=".xml" @change="parseXML" />
            </div>
        </div>
    </div>
    <script>
        const newVue = new Vue({
            el: '#ebelge',
            data: {
                index: 1,
                invoices: [
                    {
                        evrakNo: "1"
                    }
                ]
            },
            methods: {
                parseXML(e) {
                    this.invoices = [];
                    const $xmlFiles = e.target.files;
                    for (let i of $xmlFiles) {
                        $.get(
                            URL.createObjectURL(i),
                            (xml) => {
                                this.invoices.push($.fn.earsivXML(xml, i.name));
                            },
                            "xml"
                        );
                    }
                }
            }
        })

    </script>