Handle events in Vue 3 with Typescript

Event.vue

<template>
  <div class="body--wrapper" :class="{ active: !slide && !width }">
    <Header"></Header>
    <div class="container">
      <router-view :key="$route.path"/>
    </div>
  </div>
</template>

<script lang="ts">
 // @ is an alias to /src
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import Header from '@/components/partials/Header.vue';
export default defineComponent({
  components: {
    Header,
  },
  setup() {
    const store = useStore();
    const setSlide = (slide: boolean) => store.dispatch('setSlide', slide);
    const setNav = (nav: boolean) => store.dispatch('setNav', nav);
    const slide = computed(() => store.getters.slide);
    const width = computed(() => store.getters.width);
    const nav = computed(() => store.getters.nav);
    const handleSlide = async () => {
      await setSlide(!slide.value);
      await setNav(!nav.value);
    };
    const handleScroll = (event: Event, el: HTMLElement) => {
      const target = event.target as HTMLElement;
      console.log(target)
    };

    return { slide, width, nav, handleSlide, handleScroll , handleToTop};
  },
  directives: {
    scroll: {
      // directive definition
      mounted(el: HTMLElement, binding) {
        let fn = function(evt: Event) {
          if (binding.value(evt, el)) {
            window.removeEventListener('scroll', fn);
          }
        };
        window.addEventListener('scroll', fn);
      }
    }
  }
});
</script>

<style>
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  margin: 0%;
  padding: 0%;
}
.body--wrapper.active {
  position: fixed;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.event {
}
</style>