Nuxt.jsでアンカーリンクをクリックした時に固定ヘッダーの高さをマイナスした位置に移動したい。

Question

vue.js,nuxt.jsを勉強し始めていてからまだ日が浅いのですがどなたかアドバイスいただけると助かります。

##使用しているもの

vue-scrolltoを使用して作成しているページのアンカースクロールをしています。
参考サイト:【Nuxt.js】plugin実践編：vue-scrolltoでスムーズにスクロール

<template>
  <header class="header">
    <div class="header-content">
        <nuxt-link class="header-content__title" v-scroll-to="'/'" to="/">Header</nuxt-link>
        <ul class="header-content__list">
            <li>
                <nuxt-link v-scroll-to="'#content01'" to="#content01"><span>content01</span></nuxt-link>
            </li>
            <li>
                <nuxt-link v-scroll-to="'#content02'" to="#content02"><span>content02</span></nuxt-link>
            </li>
            <li>
                <nuxt-link v-scroll-to="'#content03'" to="#content03"><span>content03</span></nuxt-link>
            </li>
        </ul>
    </div>
  </header>
</template>

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
  duration: 0,
  easing: "swing",
  offset: -80(変数として指定したいです),
})

※省きますがnuxt.config.jsにもpluginとしての読み込みはおこなっております。

上記コードで問題なくアンカースクロールとしては機能しますが、ヘッダーが固定の場合オプションのoffsetの値にヘッダーの高さを取得した値をいれることは可能なのでしょうか？

    this.headerHeight = $('header').outerHeight();
    $('a[href^="#"]').on("click", (e) => {
      const speed = 500;
      let href = $(e.currentTarget).attr("href");
      const target = $(href == "#" || href == "" ? "html" : href);
      const position = target.offset().top - this.headerHeight;
      $("body,html").animate({ scrollTop: position }, speed, "swing");
      return false;
    });

例えばですがjqueryだと上記コードのような形で

const position = target.offset().top - this.headerHeight;

としてヘッダー分の高さを取得した値をマイナスしている処理を行いたいと思っておりました。

#id {
   margin-top: -80px;
   padding-top: 80px;
}

上記CSSでアンカーの時の位置を調整できるのは知っておりますが、できれば<script></script>タグ内で対応できないのかな？と思い質問を投稿させていただきました。

よろしくお願いいたします。