혹시 전역으로 이벤트리스너 설정이 가능한가요?

안녕하세요~ main.js 같은 곳에 전역으로 리스너를 선언해서 각각 컴포넌트 내에서 일어나는 클릭이나 router 변경 등을 감지하고 싶은데요!

$(document).ready(function() {
    let logoElement = document.getElementById('logo')
    logoElement.addEventListener('click', function() {
        console.log("로고를 클릭했습니다.")
    })

    let imgElement = document.querySelector('.img')
    imgElement.addEventListener('click', function() {
        console.log("이미지를 클릭했습니다.")
    })
})

이런식으로 엘리먼트 하나하나 클릭할때마다 콘솔이 찍혔으면 좋겠는데 가능한가요?

부모-자식으로 구성되어있는데 하위의 하위(=자식의 자식) 레벨의 컴포넌트에서의 클릭도 인식할 수 있나요?

각 Vue 파일마다 mounted()에서 $(document).ready(~)를 통해 이벤트리스너를 달아야하는건지, 아니면 한 파일에 전역으로 선언해서 공통으로 사용할 수 있는건지 궁금해요!

또 JQuery가 아닌 Vue로 구현할 수 있는 방식이 있나요?