VueJS. Can the v-on property be added to a transition-group tag?

I am working on a project of Vuejs 2.5, in which I have a dynamic table with an animation that I provide the default label and in it I say that it will work as a tbody so that the effect comes out with each tr to appear.

<transition-group 
    class="tbody" 
    name="list-complete" 
    tag='tbody'>
                    <tr v-for='x in xlist'
                        :class="{
                            'tr':true, 
                            'font18':true,
                            'is-selected':(x.id == selected.id), 
                            'list-complete-item':true,
                        }" 
                        @click="focus(x)" 
                        :key='x.id'>
                        <td class="td is-unselectable font12 tmiddle" width="5%">
                            {{ x.id }}
                        </td>
                        <td class="td is-unselectable is-uppercase" width="30%">
                            {{ x.title }}
                        </td>
                        <td class="td font14 is-unselectable is-italic tmiddle is-uppercase" width="20%">
                            {{ x.mood_title }}
                            <!--span class="is-pulled-right">//</span-->
                        </td>
                        <td class="td font14 is-unselectable is-italic tmiddle is-uppercase" width="20%">
                            {{ x.genere_title }}
                            <!--span class="is-pulled-right">//</span-->
                        </td>
                        <td class="td font14 is-unselectable is-italic tmiddle" width="10%">
                            {{ x.bpm }}BPM
                            <!--span class="is-pulled-right">//</span-->
                        </td>
                        <td class="td font14 is-unselectable is-italic tmiddle" width="15%">
                            {{ x.duration }}MIN
                            <!--span class="is-pulled-right">//</span-->
                        </td>
                        <td class="td font14 is-unselectable is-italic tmiddle" width="10%">
                            {{ x.price }}$USD
                        </td>                                   
                    </tr>
</transition-group>

At the time of the page, I had to use the table with scroll so that when the user reaches the end of the table, more data is added. The problem is that when I add a property v-on: scroll or @scroll, it does not work in the transition-group. Although if I add a normal tbody tag if it works, but I lose the transition.

   <transition-group 
                class="tbody" 
                name="list-complete" 
                tag='tbody'
                @scroll="handleScroll">

<tbody @scroll="handleScroll" transition="list-complete">

here the method:

    handleScroll: function(e) {
        var currentScrollPosition = e.srcElement.scrollTop;
        if (currentScrollPosition > this.scrollPosition) {
            console.log("Scrolling down");
        }
        this.scrollPosition = currentScrollPosition;
    },

Will there be any way that the two can work?