Vue: элемент реагирует слишком медленно, чтобы перенести событие

Question

У меня страница состоит в основном из двух частей: левый столбец и правый столбец (гораздо большая площадь). Правый столбец содержит около 1500 строк (компонент), и каждая строка содержит 5 div в качестве ячеек Раньше я связывал событие dragover с родительским элементом этих двух столбцов. Каждый раз, когда происходит событие dragover, должен появляться div оверлея, который покрывает всю область окна. Пример ниже:

Javascript

let row = {
    props: ['item'],
    template: `<div class="row">
                   <div class="cell">{{item.value1}}</div>
                   <div class="cell">{{item.value2}}</div>
                   <div class="cell">{{item.value3}}</div>
                   <div class="cell">{{item.value4}}</div>
                   <div class="cell">{{item.value5}}</div>
               </div>
};

new Vue({
    el: '#parent',
    components: {
        'row': row
    },
    template: `<div id="parent" @dragover="showOverlay">
                   <!-- display if this.overlay == true, otherwise hide -->
                   <div class="overlay" v-show="overlay"></div>

                   <div class="left-column">Drag a file and drop</div>
                   <div class="right-column">
                       <row :rows="rows" v-for="item in rows"></row>
                   </div>
               </div>`,
    data: {
        rows: [...],
        overlay: false
    },
    methods: {
        showOverlay(e) {
            e.preventDefault();
            this.overlay = true;
        }
    }
});

Код работает нормально, хотя прокрутка списка немного запаздывает. Но когда я перетаскиваю файл над областью правого столбца, для наложения оверлея требуется несколько секунд, в то время как перетаскивание в левый столбец занимает менее секунды.

HTML

<div id="parent"></div>