Below is the home.vue component which has service and legal two other components. In the mounted() I have if id is present? then scrollinto view the legal section. The issue I am facing here is it does scroll a little but doesnt scroll legal section to the top of the page. Attached is the image. Please help me find where I am going wrong

home.vue

<template>
  <div>
    <Service id="service"></Service>
    <br />
    <hr>
    <Legal id="legal"></Legal>
  </div>
</template>

<script>
import Service from 'views/home/service.vue';
import Legal from 'views/legal.vue';

export default {
  components: {
    Service,
    Legal,
  },
  props: ['id'],
  mounted() {
    // this.id == 'legal'
    if (this.id) {
      this.$nextTick(()=> window.document.getElementById('legal').scrollIntoView());
    }
  }
};
</script>