Работа с DOM во vue?

Допустим у меня есть 4 компонента - main, header, first, second header - это плавающий navbar в котором при скороле переключаются активные ссылки на компонент в зависимости от положения пользователя на сайте.

в main-компоненте я получаю положение пользователя:

<template>
   <div>
      <header ></header>
      <first ></first>
      <second ></second>
   </div>
</template> 
<script>
import header from './header.vue'
import first from './first.vue'
import second from './second.vue'
export default {
  name: 'main',
  data () {
     return {
       scrollPosition: null
     }
  },
  components: {
    first,second,header
  },
  methods:{
      updateScroll() {
        this.scrollPosition = window.scrollY
      }
  },
  mounted() {
      window.addEventListener('scroll', this.updateScroll)
  }
}

Как в main компоненте получить положение нужного нам элемента, например с компонентом first

<template>
  <section ref="first">
      some content
  </section>
</template>
<script>
  export default {
    mounted: function () {
      this.$refs.first.offsetTop // позиция элемента
    }
  }
</script>

Как передать из компонента first позицию элемента в main чтобы там сравнивать ??