When Position Pretends to Be Identity: Understanding key in Vue List Rendering

At first, rendering a list feels simple.

You have data.

You loop through it.

You display it.

<li v-for="(user, index) in users" :key="index">
  {{ user.name }}
</li>

It works.

Nothing breaks.

Everything looks correct.

And because of that… it’s easy to believe this is enough.

But there’s a quiet assumption hiding underneath this code.

An assumption that only reveals itself when things start to change.

The Illusion of Stability

As long as your list never changes, using the index as a key feels perfectly fine.

Each item has a position:

• first
• second
• third

And each position maps cleanly to a piece of UI.

So it feels natural to say:

“This item is index 0. That’s its identity.”

But that only works in a world where nothing moves.

When the List Starts Shifting

Now imagine something changes.

The first item is removed.

Your list goes from this:

[A, B, C]

to this:

[B, C]

At a glance, this seems straightforward.

You just removed A.

But Vue doesn’t see it that way — not when you use index as the key.

What Vue Actually Sees

With :key="index", Vue sees:

Before:

• A → key 0
• B → key 1
• C → key 2

After:

• B → key 0
• C → key 1

From Vue’s perspective, the keys didn’t disappear.

They shifted.

So instead of thinking:

“A is gone, B moved, C moved”

Vue thinks:

“key 0 is still here”

“key 1 is still here”

So it reuses the existing components.

But now something subtle happens.

When Identity Gets Rewritten

The component that used to represent A…

is now reused to represent B.

And the one that used to represent B…

is now reused to represent C.

The structure stays.

But the meaning changes.

And this is where things start to feel… off.

State Doesn’t Move With Data

If your list is just static text, you might never notice.

But real components often carry internal state.

Inputs. Toggles. Animations. Temporary values.

Now imagine this:

<input v-model="user.name" />

You type something into the first input.

Then the list updates.

Suddenly:

• what you typed is still there
• but it’s attached to a different user

The UI looks correct on the surface.

But underneath, the state has been reassigned.

Not because Vue is broken.

But because it followed your instruction.

The Real Meaning of key

At first, it’s tempting to think:

“key helps Vue update efficiently”

But that’s not the full story.

A better way to see it is:

key tells Vue what is the same thing over time.

Not the same position.

Not the same slot in a list.

The same entity.

Position vs Identity

When you use the index as the key, you’re saying:

“Identity is defined by position”

But in most real applications, that’s not true.

Users don’t become someone else just because they moved up the list.

Items don’t lose their identity when something is inserted before them.

So when position changes, but identity is tied to position…

you get a mismatch.

And that mismatch is where bugs live.

When Index Actually Works

There are cases where using index is completely fine.

When:

• the list never changes
• items are never reordered
• nothing is inserted in the middle
• components don’t hold internal state

In those cases, position is stable.

And if position is stable, it can safely act as identity.

But those cases are rarer than they seem.

A Small Detail That Changes Everything

Using a proper key, like an ID:

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Changes how Vue understands your UI.

Now it can say:

• this item stayed
• this one moved
• this one is new
• this one is gone

Not based on position.

But based on identity.

The Subtle Bug You Don’t See

The most dangerous part of using index as a key is that it often looks fine.

The UI renders.

The data appears correct.

Nothing crashes.

But under the surface, state is drifting.

Quietly.

Until one day, something feels off.

An input shows the wrong value.

An animation behaves strangely.

And it’s hard to trace back why.

A Shift in Perspective

At first, key feels like a technical requirement.

Something you add because Vue tells you to.

But it’s actually something deeper.

It forces you to answer a question:

“What makes this item the same… even when everything around it changes?”

And once you start thinking that way…

you stop writing lists based on position.

And start thinking in terms of identity.

And that small shift changes everything.