vue плавная прокрутка разных компонентов

Question

Я хочу нажать кнопку внутри заголовка и прокрутить до точки, где появляется другой компонент. Внутри Header. vue я написал компонент заголовка, а кнопка сделана с помощью Vuesax. Когда я нажимаю «О нас», я хочу, чтобы экран прокручивался вниз до пункта «О нас», который находится внутри «О нас». vue. Я использую vueSmoothScroll и импортировал его в файл main. js. Я написал ": href" на каждой кнопке и хочу написать то же самое внутри "AboutUs file". Я думаю, мне нужно использовать реквизиты или что-то еще, чтобы передать значение другому компоненту? Я добавил id внутри тега div в AboutUs. vue. Надеюсь, кто-то сможет в этом разобраться. Спасибо!

Заголовок. vue поле

<template>
  <div>
    <header class="main-header">
      <div class="container">
        <div class="header-left">
          <h1 class="mh-logo">
            <img src="../assets/ENTREP.png" width="250" height="100" />
          </h1>
        </div>
        <div class="header-right">
          <nav class="main-nav">
            <ul class="main-nav-list">
              <vs-button
                line-origin="left"
                type="line"
                :color="purple"
                size="large"
                v-smooth-scroll
                :href="aboutus"
                >About us</vs-button
              >
              <vs-button
                line-origin="left"
                type="line"
                :color="purple"
                size="large"
                v-smooth-scroll
                :href="values"
                ><p>Values</p></vs-button
              >
              <vs-button
                line-origin="left"
                type="line"
                :color="purple"
                size="large"
                v-smooth-scroll
                :href="whatwedo"
                ><p>What we do</p></vs-button
              >
              <vs-button
                line-origin="left"
                type="line"
                :color="purple"
                size="large"
                v-smooth-scroll
                :href="contact"
                ><p>Contact</p></vs-button
              >
            </ul>
          </nav>
        </div>
      </div>
    </header>
  </div>
</template>

Внутри AboutUs. vue файл

<template>
  <div class="container" id="aboutus">
    <div class="row">
      <div class="content-container">
        <div class="aboutus">
          <h1>About Us</h1>
        </div>
        <div class="text-col">
          <h3>
            ENTREPは個々人の自己実現の最大化が<br />幸福に繋がると信じ、コミュニティベースで<br />「教養としての起業」を提案します。
          </h3>
        </div>
        <div class="img-col"></div>
      </div>
    </div>
  </div>
</template>