Displaying modal once user scroll page

Get Help
#1

Hi, I want a way to display a modal on Vue, when user scroll my page after scrolling around 400-500 px, so i try this :

ViewOfMyModal.vue:

<template>
<div id="app">

    <Modal
      v-on="handleScroll"
    />
  </div>


<script>
//import Modal from '@/component/Modal.vue';
export default {
methods: {
    handleScroll(event) {
      this.handleDebouncedScroll= (window.scrollY > 0);
    }
  },
},
</script>

and my Modal.vue :

<template>
  <transition name="modal-fade">
    <div class="modal-backdrop">
      <div class="modal"
        role="dialog"
        aria-labelledby="modalTitle"
        aria-describedby="modalDescription"
      >
        <header
          class="modal-header"
          id="modalTitle"
        >
          <slot name="header">
            This is the default tile!
          </slot>
          <button
            type="button"
            class="btn-close"
            @click="close"
            aria-label="Close modal"
          >
            x
          </button>
        </header>

        <section
          class="modal-body"
          id="modalDescription"
        >
          <slot name="body">
            This is the default body!
          </slot>
        </section>

        <footer class="modal-footer">
          <slot name="footer">
            This is the default footer!
          </slot>
          <button
            type="button"
            class="btn-green"
            @click="close"
            aria-label="Close modal"
          >
            Close me!
          </button>
        </footer>
      </div>
    </div>
  </transition>
</template>

But i got this error :

@ ./src/router/index.js 9:0-39 54:15-20
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.16:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

#2

A few things,

  1. The error you provided gives us no insight, try providing the stack trace
  2. This may be a copy paste error, but your ViewOfMyModal.vue component needs a </template> before <script>
  3. Your event binding (v-on="handleScroll") doesn’t bind to any specific event
#3

Have you an exemple of how i could made it ?, i don’t see how i could that