My understanding is that adding a key attribute to a component should make it reactive when the key changes. However, with a v-navigation-drawer from Vuetify, this doesn't seem to have any impact.
I've tried making arbitrary changes to the loggedIn key such as using += 1, which should trigger a re-render of the component.
The scenario here involves having a global navigation drawer that displays context based on whether the user is logged in or not.
Full code snippet of the component:
<template>
// Component template code goes here
</template>
<script>
export default {
// Component data, methods, mounted function and watch section
}
</script>I'm wondering if there are specific conditions that need to be met for the key changes to take effect, or if this functionality should be working as expected. I've confirmed that loggedIn does indeed change upon logging in.
Another theory I considered was that due to the presence of the v-if directive, the component might be removed during the key change, but I have already ruled out this possibility.