vue3 composition api script setup, share click event with other components - vuejs3

Question

I am using Vue3 (composition API with script setup) and I am trying to share a click event with other components.
<h1 #click="useLink">Header #</h1>
const useLink = (e) => {
let section = e.target.closest(".section");
if (router.currentRoute.value.hash !== "#" + section.id) {
router.push("#" + section.id);
}
};
Note: This method is repeated in few other components. ☹️
When a user clicks on h1, useLink() gets called and pushes that id to router which scrolls to position.
Thanks

Answer 1

A composable should export a function that returns some reusable logic (in this case, another function)
link.js
import { useRouter } from 'vue-router';
export function useLink() {
const router = useRouter();
function goToSection(e) {
const section = e.target.closest('.section');
if (router.currentRoute.value.hash !== '#' + section.id) {
router.push('#' + section.id);
}
}
return {
goToSection
};
}
Then in any component you need this reusable function: import the file, destructure the reusable function, and apply it to your #click handlers.
component.vue
<script setup>
import { useLink } from '#/composables/link';
const { goToSection } = useLink();
</script>
<template>
<div class="section" id="one">
.
.
.
<h1 #click="goToSection">Scroll to section div</h1>
</div>
</template>