<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)
  }
}

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