What does putting :key on a component (not in v-for) do?
Quick Answer
Changing a component's :key tells Vue to destroy the old instance and create a fresh one, resetting all its internal state and re-running lifecycle hooks. A common use: <UserProfile :key="$route.params.id" /> so navigating from user 1 to user 2 gives a clean component instead of Vue reusing the instance.
Normally when a route param changes, Vue keeps the same component instance and just updates the props, which is efficient but means any local state — a half-filled form, the scroll position — sticks around. Putting :key on the component and binding it to the thing that changed, like the route id, forces Vue to tear down the old instance and build a new one, so lifecycle hooks re-run and state resets. It's the quick fix for “why is user 2's page showing user 1's data.” The alternative is watching the prop and resetting manually.
- By default Vue patches the same component in place when only props change — efficient, but local state (form input, scroll position) carries over.
:keyforces a remount, which is the simplest fix when you want a genuine reset.- Alternative:
watchthe changing prop and reset state manually — less blunt, more code. - Don't overuse — a remount throws away the perf benefit of patching.