не могу разобраться с плавной прокруткой к якорю по id vue.js

Не могу реализовать прокрутку по клику на заголовок в шапке к элементу из другого компонента приложения с использованием id. Задача: при клике на заголовк навбара плавно прокручиваться к элементу(селекшену), которые находятся внутри другого компонента, однако связано через магазин при помощи id. Код компонентов представляю ниже. Склоняюсь к ошибке в магазине по определению ссылки на элемент из компонента

мои заголовки в шапке навбара, по которым я хочу кликать:

<li v-for="n in items" :key="n"><a @click="scroll" class="menu_link">Part {{n.id}}</a></li>

Скрипт:

setup() {
const store = useStore()

const lol = computed(() => store.state.lol)
const kek = computed(() => store.state.kek)

const items = computed(() => store.state.items)
const id = computed(() => store.state.id)

return {
  lol, kek, items, id,
  open: () => store.commit('changeStatus'),
  scroll: () => store.commit('openSlide')
}}

мои элементы, которым я хочу прокручиваться, находящиеся в другом компоненте vue.js

<section :class="selection + `${n.id}`" v-for="n in items" :key="n" :id="n.id">
  <h2 class="page_sub-title"> This is part {{n.id}}</h2>
    <div class="page_text">
    <p>Lorem ipsum dolor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
</section>

Скрипт:

setup() {
const store = useStore()

const items = computed(() => store.state.items)
const id = computed(() => store.state.id)
const selection = computed(() => store.state.selection)

return {
  items, id, selection
}}

магазин store, в котором я создаю массив и прописываю мутации:

state() {
return {
  status: true,
  lol: 'menu_body',
  kek: 'menu_icon',
  menuLinks: [],
  items: [...Array(6)].map((n, i) => ({
    id: `${i + 1}`,
    content: `content${i + 1}`
  })),
  selection: 'page_selection page_selection_'
}}, mutations: {
changeStatus(state) {
  state.status = !state.status
  if (state.status) {
    state.lol = 'menu_body _active'
    state.kek = 'menu_icon _active'
    document.body.classList.toggle('_lock')
  } else {
    state.lol = 'menu_body'
    state.kek = 'menu_icon'
    document.body.classList.remove('_lock')
    }
  },

openSlide(state, n){
  // Получение ссылки на элемент
  let slide = state.items[n]
  // Определение расстояния от начала страницы до нужного элемента
  let top = window.scrollY + slide.getBoundingClientRect().y;
  // Перемотка
  window.scrollTo(0, top)
}