Vue.js - how to scroll to a parent "ref" division from a child method?

Question

Here I am asking for your help...I want to scroll within a page. The page is rendered by the parent component, that include some child component where the scrollTo method is defined.

I have a parent component - LandingPage.vue

<script>

import InPageAnchor from '@/Components/Navigation/Buttons/InPageAnchor.vue';

export default {

  components: {
    InPageAnchor,
  },
};
</script>

<template>
   <InPageAnchor/> <!-- is a button with the scrollTo method -->
   <div ref="scrollHere" >
   </div>
</template>

and here the child component: InPageAnchor.vue

<script>

export default {

  methods: {

      scrollTo: function () {
        
        this.$parent.$refs.scrollHere.$el.scrollIntoView({ behavior: 'smooth'}) //this.$parent.$refs.scrollHere.$el is undefined
      },
  }
}
</script>

<template>
    <button
        type = "button"
        class = "rounded-md my-1 px-2 w-1/6 bg-teal-600 hover:border-violet-700 hover:border-x-4 hover:bg-teal-700/75"
        @click = "scrollTo()">
        {{ text }}
      </button>  
</template>

There is a bit more behind the use of the child, and also the "scrollHere" is in fact given as props...

Thank you

Let me know if you want any additional details

LN