Кнопка VueJS BackToTop

Question

Так что я экспериментирую с VueJS, но наткнулся на что-то маленькое, на что я не могу найти ответ.

Я хотел бы иметь простую кнопку BackToTop, и я обычно использую jQuery для решения этого с помощью кода, подобного следующему:

jQuery(document).ready(function($){
//ToTop
var totop = $("#totop");
$(window).scroll(function(){
    ($(this).scrollTop() > 200) ? totop.fadeIn() : totop.fadeOut();
});
//Smooth Scroll
$(function(){
    setTimeout(function(){
    if (location.hash){
        window.scrollTo(0,450);
        target = location.hash.split('#');
        smoothScrollTo($('#'+target[1]));
        }
    },1);
    $('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event){
        if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if(target.length){
                event.preventDefault();
                $('html, body').animate({scrollTop: target.offset().top},1000,function(){
                    var $target = $(target);
                    $target.focus();
                    if($target.is(":focus")){
                        return false;
                    }else{
                        $target.attr('tabindex','-1');
                        $target.focus();
                    };
                });
            }
        }
    });
});
$(window).bind("mousewheel",function(){$("html,body").stop(true,false);});
//End
});

Но так как я хочу полностью придерживаться VueJS, это для меня исключено.

Хотя я уже использую библиотеку vue-scrollto, я нахожу немного раздражающим использование пакета для чего-то простого: https://cdn.jsdelivr.net/npm/vue-scrollto

Моя текущая кнопка вверху закодирована в формате html следующим образом:

<button id="totop" v-scroll-to="'body'" v-if="toTopVisible"></button>

Где, как вы можете видеть, я использую пакет vue-scrolto и оператор if, чтобы сделать его видимым или нет при прокрутке. Но даже это то, что я не могу повернуть голову, как бы я работал и активировать на прокрутке после, скажем, 300px.

То, что я думал, было бы легко, оказалось довольно сложно, и пока я все еще учусь, мне бы хотелось услышать некоторые мысли по этому поводу.

Какой будет хороший код кнопки VueJS «вверх-вверх», который не только прокручивает обратно до 0,0 (или конкретного идентификатора / хэша), но также появляется только после 300px и исчезает, если он находится вверху страницы (< более 300 пикселей прокрутки).

Я уже прошел через бесчисленное множество Google Pages, CodePens и JSFiddles, но многие из них либо используют тяжелые пакеты, либо даже комбинируют JQuery с VueJS, что, на мой взгляд, даже более странно.

Так что, если бы кто-нибудь мог просветить меня или дать мне какое-то указание, где я мог бы искать идеальную кнопку «Вверх», которая обладает простыми и схожими функциональными возможностями, чем мой код jQuery, то это было бы здорово!

Заранее спасибо за дополнительную информацию.