What wrong with Vue scroll modal?

Question

Im trying since yesterday find a way to screen a modal on Vuejs, when i scrolling down a page, the problem is i got nothing on my screen when i compile the code.

 <template>
 <h2 id="This is a example">Example</h2> 
  <div id="app">
    <ModalComponent v-if="showModal"/>
 

</template>

<script>
import ModalComponent from '/ModalComponent.vue';
export default {
 components: {
 ModalComponent,
 },
  data: () => ({
  showModal: false,
  scrollHeight: 0,
  interval: null,
   }),
   methods: {
    handleScroll() {
    this.handleDebouncedScroll = window.scrollY > 0;
    },
  },
mounted() {
this.interval = setInterval(() => {
  this.scrollHeight = document.body.scrollHeight;
 }, 100);
},
unmounted() {
 clearInterval(this.interval);
},
watch: {
scrollHeight() {
  if (this.scrollHeight === 450) this.showModal = true;
  },
 },
};
</script>