querySelector issues in Vue.js

I've had a weird experience with the querySelector.

File structure:

App.vue
views/
--Login.vue
component/
--Canvas.vue
--Navigation.vue

Now, in my canvas, I have p5.js setup where there are some effects as a background (z-index: -100;). I have it setup so that the user has a custom cursor. On hover, the center of the p5 ellipse should change color, which it does, apart from on the Login.vue page. All the buttons in Navigation.vue work perfectly. I have tried querySelector, vue refs and getElementById. For my Navigation.vue, I simply have this:

const nav = document.querySelector('#hover');
if (nav) {
    nav.addEventListener('mouseenter', () => {
        isHovered = true;
    });
    nav.addEventListener('mouseout', () => {
        isHovered = false;
    });
}

In my App.vue, I have it setup like this:

<template>
    <div id="app">
        <Navigation />
        <router-view />
        <Canvas />
    </div>
</template>

and gets rendered in Chrome like this:

(.nav is my Navigation.vue | .main is my Login.vue | .p5Canvas is my Canvas.vue)

When I console.log() a button that I want the hover effect on, it returns undefined. All I want is the same hover effect as in my Navigation.vue. Any ideas why this doesn't work?

The weird part of this, is if I edit and add a console.log() after the page has loaded, it gives me a NodeList of the buttons. So is there a way to detect when a button renders, or a global call for $refs? Thanks in advance