Best practice for manually refreshing components/ emitting events

[Moaratorium]

I have a simple login and logout button contained inside my navbar, where the login and logout button renders conditionally based on the status of a stored username variable in local storage. Under normal conditions, various fields in the navbar are reactive but I need to manually refresh it.

Currently I'm defining the emit events

const emit = defineEmits("checkLogin");

and in the logout function

emit("checkLogin");

which calls the event in my app.vue

<Navbar :key="navKey" id="navbar" @checkLogin="loginRefresh"></Navbar>

that then calls my refresh function.

function loginRefresh() {
  navKey++;
}

I'm relatively new at this, and while it technically does work, I'm curious if anyone here know if there is a better practice than simply changing a key to refresh a component (or perhaps simply a more correct format for the key)?

On top of this, the emitted event is throwing a warning:
[Vue warn]: Component emitted event "checkLogin" but it is neither declared in the emits option nor as an "onCheckLogin" prop.

I appreciate any feedback you have, thank you.

[mJeromeDiaz]

Sorry for time

Not const emit = defineEmits("checkLogin");

But const emit = defineEmits(["checkLogin"]);

https://vuejs.org/api/sfc-script-setup#defineprops-defineemits