Hide element in VueJs while scrolling

I am making vue project.

I want to hide some component while mouse scrolling, but when scroll ends, want to show component again.
I know using scroll event, but again doesn’t shows component.

    <div class="table" @scroll="handleScroll()">
    .....
    </div>
    ....
    <div class="table" id="sumTable">

....
    </div>
.....
    methods: {
    handleScroll() {
        $('#sumTable').hide();
    },
  }

Is this possible in vue?

Answer

I resolved this issue.

            handleScroll() {
                if(this.timer !== null) {
                    clearTimeout(this.timer);
                    $("#sumTable").hide();
                }
                this.timer = setTimeout(function() {
                    $("#sumTable").show();
                }, 150);
            },

timer variable is applied.