vue-scrolltoを使って、ページ内スクロール機能とページをまたいでのスクロール機能を実装したい。

Question

前提・実現したいこと

vue-scrolltoを使って、ページ内スクロール機能とページをまたいでのスクロールした際に、
見た目の崩れがでないようにしたい。
適切な位置にスクロールできるようにしたい。

ここに質問の内容を詳しく書いてください。
ページ遷移した際に、ヘッダーの箇所が映るのは、ヘッダーが固定されていないから起こることでしょうか。
それとも、スクロールのタイミングと画像が読み込みタイミングを変更することで解消できるんでしょうか。
こういった事象が起こる原因と解決方法を教えていただけますと幸いです。

発生している問題・エラーメッセージ

vue-scrolltoを用いてページ遷移をし、アンカーリンクにとんだ際に、ヘッダーがうつる。
（ページの構成としては、ヘッダーの下に画像、遷移したいアンカーリンクの順番においている。）先に、スクロールし、画像が読み込まれていない。画像が読み込まれていない分、ヘッダーの箇所が映ってしまっていると考えられる。

該当のソースコード

headermenu/index.vue

<template>
  <div>
    <ul>
      <li>
        <NuxtLink
          v-scroll-to="{
            el: '#scrolltoservise',
            offset: 25,
          }"
          :to="{ path: '/', hash: 'scrolltoservise' }"
          >{{ servise }}</NuxtLink
        >
      </li>
      <li>
        <NuxtLink
          v-scroll-to="'#conpanyprofile'"
          :to="scrolltoconpanyprofile"
          >{{ conpanyprofile }}</NuxtLink
        >
      </li>
      <li>
        <NuxtLink :to="scrolltocontact">{{ contact }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HeaderMenu',
  props: {
    servise: {
      type: String,
      required: false,
      default: 'サービス',
    },
    scrolltoservise: {
      type: String,
      required: false,
      default: '/#scrolltoservise',
    },
    scrolltoconpanyprofile: {
      type: String,
      required: false,
      default: '/#conpanyprofile',
    },
    scrolltocontact: {
      type: String,
      required: false,
      default: '/contact',
    },
  },
}
</script>
<style scoped>
div {
  margin: 0%;
}
ul {
  display: flex;
  list-style: none;
}

</style>

pages/ index.vue

<template>
  <v-app>
    <v-main class="ma-0 pa-0">
      <div class="bg">
        <v-container fluid class="pa-0 ma-0">
          <div class="Block1">
            <v-img :src="require(`@/assets/img/top-image.png`)" />
          </div>
          <div class="Block2">
            <v-col cols="12" class="servise_ttl" align="center">
              <!------- SERVISE サービス --------->
              <div id="scrolltoservise" class="heading-subheading_servise">
                <heading-subheading heading="SERVISE" subheading="サービス" />
              </div>
            </v-col>
            <div class="contents1">
              <v-row justify="center">
                <v-col cols="12" sm="8" md="4" align="center">
                  <div class="Titletext">
                    <title-text
                      title="駄菓子情報発信"
                      :image="require(`@/assets/img/decoration.svg`)"
                      text="ggggggggg"
                      color="black"
                    />
                    <div class="youtube_btn">
                      <info-button
                        name="YouTubeチャンネル"
                        icon="mdi-open-in-new"
                        url="https://www.youtube.com/"
                      />
                    </div>
                  </div>
                </v-col>
                <v-col cols="10" class="border" sm="8" md="4" align="center">
                  <div class="image">
                    <shadow-image
                      :image="require(`@/assets/img/service1.png`)"
                    />
                  </div>
                </v-col>
              </v-row>
            </div>
          
          </div>

        </v-container>
      </div>
    </v-main>
  </v-app>
</template>

<script>
import HeadingSubheading from '~/components/atoms/HeadingSubheading/Index.vue'
import ShadowImage from '~/components/atoms/ShadowImage/Index.vue'
import TitleText from '~/components/atoms/TitleText/Index.vue'
import InfoButton from '~/components/atoms/InfoButton/Index.vue'
import OverviewUnderline from '~/components/atoms/OverviewUnderline/Index.vue'

export default {
  components: {
    HeadingSubheading,
    ShadowImage,
    TitleText,
    InfoButton,
    OverviewUnderline,
  },
  data() {
    return {
    }
  },
  // mounted() {
  //   const hash = this.$route.hash
  //   if (hash && hash.match(/^#.+$/)) {
  //     this.$scrollTo(hash, 0, { offset: 0 })
  //   }
  // },
  mounted() {
    if (this.$route.hash) {
      this.scrollToHash()
    }
  },
}
</script>

<style scoped>
.bg {
  color: #f2ede7;
  background: #fcf6ef;
  margin: 0;
}
.Block1 {
  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 83%, 0% 100%);
  max-height: 1200px;
  width: 100% auto;
  margin: 0;
}
.Block2 {
  background-color: #fcf6ef;
  color: #ccc;
  height: 1000px;
}
.Block3 {
  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  clip-path: polygon(0 21%, 100% 0, 100% 100%, 0% 100%);
  background-color: #f2ede7;
  padding: 60px 0 10px 0;
  height: 680px;
}
.contents1 {
  margin-top: 61px;
  margin-bottom: 75px;
}
.youtube_btn {
  padding-top: 10px;
}
.onlineSalon_btn {
  padding-top: 10px;
}
</style>

plugin/ vue-scrollto.js

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

Vue.use(VueScrollTo, {
  duration: 500,
  easing: 'ease',
})

参考にした記事

https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91plugin%e5%ae%9f%e8%b7%b5%e7%b7%a8%ef%bc%9avue-scrollto%e3%82%92%e3%83%9a%e3%83%bc%e3%82%b8%e9%81%b7%e7%a7%bb%e3%81%a7%e3%82%82%e9%81%a9%e5%bf%9c%e3%81%95%e3%81%9b%e3%82%88/

試したこと

offsetで位置を調整
ヘッダーのcssを調整

補足情報（FW/ツールのバージョンなど）

nuxt 2.15.4
vue 2.6.12
node v14.16.0