How would I write this in Vue?

So I wrote the following code using JQuery which is pretty straight forward. It hides the navigation menu when the user scrolls down and will display it when the user scrolls up. I'm still learning Vue and I find it pretty challenging to get out of the JQuery mindset. How can I rewrite this in Vue 2.0?

var scrolled = false;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $("nav").outerHeight();

$(window).scroll(function(event){
    scrolled = true;
});

setInterval(function() {
    if (scrolled) {
        hasScrolled();
        scrolled = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    if(Math.abs(lastScrollTop - st) <= delta) // make sure user scrolled more than delta
        return;
    
    if (st > lastScrollTop && st > navbarHeight) {
        if( !$("nav").hasClass("mini-menu") ) {
            $("nav").removeClass("nav-show").addClass("nav-hide");
        }
    } 
    else {
        if(st + $(window).height() < $(document).height()) {
            $("nav").removeClass("nav-hide").addClass("nav-show");
        }
    }
    
    lastScrollTop = st;
}