What is the purpose of the `key` attribute when used on non-list elements, e.g. to force component re-creation?

Beyond list rendering, :key can be used to force Vue to treat an element/component as brand new — destroying and recreating it — whenever the key value changes, even if the same component type is rendered. This is useful when you want to fully reset a component's internal state (e.g., resetting a form when editing a different record).

<UserForm :key="selectedUserId" :user-id="selectedUserId" />

When selectedUserId changes, Vue sees a different key and creates a fresh UserForm instance instead of patching/reusing the existing one, resetting any local component state.