vue.js で $SmoothScroll を使用したいが、ページヘッダの分をずらすにはどのようにすればよいか？

Question

お世話になっております。vue.jsでWebページを作成しました
vue-smoothscroll
を使用して下記のようにコーディングしてあります。

<h1>の上部にheight:50pxのヘッダがあり、その分下げて表示したいのですが どのようにやれば良いかおわかりになる方いらっしゃいますでしょうか？

<header style="display:fixed"></header>
<h1 ref="top">TOP</h1>
・
・
・

        methods:{
            funcA(){
                //topへ500カウント使用してスクロール
                this.$SmoothScroll(
                    this.$refs.top,
                    500,
                    null,
                    null
                )
            }
        }