When a button is clicked, I want it to scroll to the h2 of the other component (but they're all on the same page). Getting an error here, how to make this work?

 <script setup>
 import { scroll } from "quasar";
 const { getScrollTarget, setVerticalScrollPosition } = scroll;

 function scrollToElement(el) {
 const el = h2;
 const target = getScrollTarget(el);
 const offset = el.offsetTop;
 const duration = 1000;
 setVerticalScrollPosition(target, offset, duration);
 }
</script>

<template>
<h1 class="q-mx-md text-weight-medium text-primary">
 </h1>
<q-btn
  class="bg-primary text-white q-mx-lg cursor-pointer"
  size="lg"
  @click="scrollToElement(el)"
>
/></q-btn>`

And this is the other component:

<template>
<section class="q-pt-md scroll">
<div class="row items-center relative-position">
  <h2 class="q-ml-md text-weight-medium">
    {{ title }}
  </h2>
</div>
</section>
</template>`