If you ve got a Vue component that won t update the way you expect it to,

this debugging guide will help you to quickly identify and x the problem.

Here s an overview of the solutions we ll cover:

0. Basic troubleshooting

1. Check that variables are reactive

2. Make sure to update Arrays and Objects correctly only in Vue 2

3. Use props directly

4. Always use computed props with Vuex
5. Make sure you aren t mutating props or Vuex state

6. Use your computed prop somewhere

H e hi g ide

Each section begins with a list of symptoms that you might be experiencing:
Thi igh a if While not exhaustive, using this should help you
nd the relevant section pretty quickly.

Or if you want, you can also read this whole guide from beginning to end.

E am le c de

The examples use the original options API instead of the newer composition

API where possible. This is because the composition API doesn t exist in Vue
2, and Vue 2 is still widely used. It s also a more advanced feature, and
should only be used if you already understand the options API.
 Ba ic ble h i g
Bef e e ge i i h d d b e chec ha ha e ade a
i i a e

I I e chec ed a f hi a ead B ea a e
he e i d f i a e a d hi e c d a e a f i e

Ma e e chec

T he a iab e e da i g he e e i gi e h d

a e c ed a e

Tha e da i g he igh c e i ead f a i ga a

di e e e he age e ec i g i da e

Tha e i ga he igh age he ei de

e i e i ead f d c i

Tha a e i i ia i i g a A a i h a Ob ec b accide
e hi g i i a

N ha e eg ha f he a e a ea a eac i i

i
 Check ha a iable a e eac i e
Thi igh a if

Y e da i g a a iab e e he e i c e b
c e i da i g

Y a e i g a a iab e i a c ed a d he c ed i
da i g i e i h d

Y e da i g V e a e b c e d e da e
e

Y e i g a a iab e f ide f V e i c e b

he da e he a iab e c e d e da e

O e fV e be fea e i eac i i Y cha ge a a iab e a d V e

a a ica da e ha i e de ed he age

H e e e e hi g i V e i eac i e b defa

If e a a a iab e be eac i e e eed a e e ha V e

ab i I de f c ed be eac i e he a iab e he e
a eed be eac i e A d i V e he a iab e ha a e ed i

ge e a di a e eed be ade eac i e

I hi ec i e c e h a e e a a iab e i eac i e i g

O i API he eg a a f i i gV ec e
C i i API a addi i a a f i i gc e i d ced
i V e
 Va iab e ha c ef ide f V e

O i API

If e e i g he i API i V e V e e eed he a iab e

i he da a f c i

e po defa l
da a()
e n
eac i eVa iable: 'hello!',
;

A hi g ha i a f he b ec e ed b he da a f c i i ade

eac i e We ca e e e he defa a e n ll ndefined if e

d a he a e i i ia i ed a he a

e po defa l
da a()
e n
eac i eVa iable: ndefined,
;

The i a a he e i ha he a iab e eed e i i da a

a
H e e i V e ca add e ie a a ead eac i e b ec a d

V e i ic h e cha ge Y c d a i ha e b ec i e
hi

e po defa l
da a()
e n
eac i eObjec : ,
;

A d he e he e e e i c e ca add a e a d

V e i be ab e de ec i

hi . eac i eObjec .ne P ope = ' omeVal e';

Agai hi i V e

I V e ca add e e ie a b ec e e he

$ e e h d hich i di c aged beca e i ha bee e ed i V e

The ec e ded a ach i e a defa a e f ndefined n ll

a e i ed bef e

If eed add a e e a b ec a a a i V e e
c e ha i he e ec i Make e da e A a a d Objec
c ec
C m i i API

If e i g he c i i API ha a i d ced i V e ca
a e a a iab e eac i e b i g he ef e h d

con eac i eCo n = ef(0);

eac i eCo n . al e++;

Y he ha e acce he de i g a e i g . al e

I e i e A d ha ha a e he c i i API g ea

Va iable f m ide f V e

If ha e a e e a ib a a a e ha i i i ia i ed ide f V e
ca i a e ha eac i e i di e e a

The a i i i ide f he da a f c i a d i ha
he a e

con e e nalVa iable = ge Val e();

e po defa l
da a()
e n
eac i eVa iable: e e nalVa iable,
;

;
The ca e eac i eVa iable acce he e e nalVa iable

The ec d a i e ei he he ef e h d if e i gV e

i g he ob e able e h di V e

I V e i g ef

impo ef f om ' e';

con e e nalVa iable = ge Val e();

e po defa l
e p()
con eac i eVa iable = ef(e e nalVa iable);
e n eac i eVa iable ;

A i hV e ca e hi e h d a e a a iab e eac i e e i e

ide f he V e c e

impo ef f om ' e';

con e e nalVa iable = ge Val e();
con eac i eVa iable = ef(e e nalVa iable);

Y ha e acce he a e i g eac i eVa iable. al e

I V e
 impo ob e able f om ' e';

con e e nalVa iable = ge Val e();

e po defa l
mo n ed()
con eac i eVa iable = ob e able(e e nalVa iable);

We ca a a ei eac i e e i e ide f he V e c e

impo ob e able f om ' e';

con e e nalVa iable = ge Val e();
con eac i eVa iable = ob e able(e e nalVa iable);
 Make e da e A a a d Objec
c ec l l i V e
Thi igh a if

Y e da i g a a iab e e he e i c e b

c e i da i g

Dea i g i hA a a d Ob ec i V e ca be a i e ic a i e
beca e he e a e i i a i i hh he eac i i e The e

a ea ed i V e beca ei e a a e e i e e

eac i i

Y ca dh ge a d he e i e i he d c b I g e

he he e a e

A a

V e ca de ec he da e a i g e i de i a a a

hi .a = [1, 2, 3];
hi .a [0] = 4;
// hi .a = [4, 2, 3]

The a a i da e b V e ha a hi g cha ged I ead

h d e he plice e h d da e he a a
 hi .a = [1, 2, 3];
// plice(inde , n mbe ToDele e, al eToAdd)
hi .a . plice(0, 1, 4);
// hi .a = [4, 2, 3]

A i e a dif a A a he plice e h di be be

V e ca a de ec he a a a i c e e e aced hich ea
ha he ead e a i e a cha

hi .a = [1, 2, 3];

// Add a ne al e i h he p ead ope a o

hi .a = [... hi .a , 4];
// hi .a = [1, 2, 3, 4]

We ca a ea e h d ha e a a a

// Fil e o al e e don' like i h he fil e me hod

hi .a = hi .fil e ( al e => al e !== 2);
// hi .a = [1, 2, 4]

// O e an o he me hod ha e n an a a
hi .a = hi .map( al e => al e * 2)
// hi .a = [2, 4, 8]

Agai he e i e d ha e a a i V e beca e he eac i i

e a c e e e i e
Objec

V e a ha be i g he e ie a e added e ed

f b ec

hi .obj =
hello: ' o ld',
goodb e: 'f iend',
;

// V e 2 canno de ec hi !
hi .obj.ne P ope = 'V e ill ne e kno abo me!';

// I al o canno de ec hi ...
dele e hi .obj.goodb e;

Si i a a a e eed e ace he e i e b ec i de f V e
de ec he cha ge

// U ing he p ead ope a o

hi .obj =
... hi .obj,
ne P ope : 'V e ill defini el kno abo me no !',
;

// U ing Objec .a ign

hi .objec = Objec .a ign(
,
hi .obj,
ne P ope : 'V e ill defini el kno abo me no !'
);
D e $ e

I V e ca a e he $ e e h d di ec e V e ha a e
da i g a A a Ob ec Whi e hi I d ec e d hi

a ach

The ai ea i ha $ e i e ed i V e igh a e
a id i g i a ead a e g adi g ea ie The ech i e i ed

ab ea e a ea e a d a e ac a c ea e a d ea ie
de a di i i
 U e di ec l
Thi igh a if

Y c e d e da e he a i cha ged

If a ig a a a ei da a V e i e he a e
i i ia i e i I be eac i e

e po defa l
p op :
nameP op:
pe: S ing,
eq i ed: e,
,
,
da a()
e n
// The al e i onl copied o e once
nameVa iable: hi .nameP op
;

I ead h d e he di ec Thi ea e aci g e e

i a ce f nameVa iable i h nameP op

We add a e h d e a e ee ha I ea
 e po defa l
p op :
nameP op:
pe: S ing,
eq i ed: e,
,
,
da a()
e n
// The al e i onl copied o e once
nameVa iable: hi .nameP op
;
,
comp ed:
ppe ca eName()
e n hi .nameVa iable. oUppe Ca e();
,
,
;

A d e i ch e e hi g e i g he di ec

e po defa l
p op :
nameP op:
pe: S ing,
eq i ed: e,
,
,
comp ed:
ppe ca eName()
// No need fo he a iable, e can
// j e he p op di ec l
e n hi .nameP op. oUppe Ca e();
,
,
;
 Al a ec m ed i hV e
Thi igh a if

Y c e d e da e he a a e f V e i cha ged

Whe ge i g a ef V e i ag d ac ice a a e he he e

e h d ha c e i hV e

mapS a e

mapGe e

A d a e e ha e he a c ed

e po defa l
comp ed:
...mapS a e(['name', 'add e ', 'phoneN mbe ']),
.
;

Thi i a e e ha V e ca e de ec a d eac he he V e

a e cha ge

If eV e a e di ec i da a i h i gac ed V e

i c he a e ce a a a d i e e eac a da e
 e po defa l
da a()
e n
// Onl copied hen he componen i c ea ed
name: hi .$ o e. a e.name,
;
,
comp ed:
ppe ca eName()
// Thi on' pda e hen V e a e pda e
e n hi .name. oUppe Ca e();
,
,
;

The be a hi i e he mapS a e he e a a c ed

e po defa l
comp ed:
...mapS a e(['name']),
ppe ca eName()
// No hi ill pda e hene e he V e `name` pda e
e n hi .name. oUppe Ca e();
,
,
;
 Make e a e m a i g
V e a e
Thi igh a if

Y e da i g he a e f a b c e d e
da e
Y e da i g he a e f V e a e b c e d e

da e

He e a e i eb he i i gV e

A component cannot modify (mutate any value that does not belong to it.

F he a hi ea a dV e a e P a e a ed i a

chi d c e f he a e c e he chi d d e ha
da a Si i a V e e he V e a e ac e i
a ed dif i i a a

B d We e a bee he e bef e

Y e bab i g d e f he f i g

Cha ge he a e f he i he a e c e
Cha ge he a e f V e a ei ide f he V e e

U e he V e a e ca c a e a he a e

Le ee h acc i h he e i h a i ga hi g e h d
Cha ge he al e f a i he a e c m e

He e e ha e a c e ha ge he name a a a d he e he
e da e ha a e

e po defa l
p op :
name:
pe: S ing,
defa l : '',
,
,
me hod :
pda eName(ne Name)
// Oop , m a ing a p op he e!
hi .name = ne Name;
,
,
;

Thi i g d beca e e e a i g he name hich ac a

be g he a e c e

I ead ha e a d i e i a e e he a e c e i
da e name i e f
 // Child. e
e po defa l
p op :
name:
pe: S ing,
defa l : '',
,
,
me hod :
pda eName(ne Name)
// We emi an e en o he pa en componen
hi .$emi (' pda e-name', ne Name);
,
,
;

I a e c e e d he i e he e h d ac a

dif he a e

// Pa en . e
< empla e>
<Child
:name="name"
@ pda e-name=" pda eName"
/>
</ empla e>
 e po defa l
da a()
e n
name: '',

,
me hod :
pda eName(ne Name)
// Thi m a ion i fine, beca e hi componen
// o n he `name` a iable
hi .name = ne Name;

,
;

U i ga ge e a e a e al e

I e c ha he a e ge h gh a i e ac he
a e ha a ei e a e

Le a ha e a i f da a b a be ab e e e e he

de i g h i g he a i e Y a e igh be a e
he i ef
 e po defa l
p op :
li :
pe: A a ,
eq i ed: e,
,
,
me hod :
e e eLi ()
// M a ing he e i n' a g ea idea
hi .li . e e e();
,
,
;

The e h d e e e di e he A a i ca ed he e e e

a i g

I ead e h d eac ed c ea e a e i ha i e e ed
 e po defa l
p op :
li :
pe: A a ,
eq i ed: e,
,
,
comp ed:
e e edLi ()
// C ea e a ne li o e don' modif o p op
con ne Li = [... hi .li ];

// Re e e o ne li .
// Modif ing hi one i pe fec l fine!
ne Li . e e e();

e n ne Li ;

,
;

N e ca e he e e edLi c ed he e e e eed a
e e ed i

H e e hi i a bi a a d gg e b h li a d e e edLi

e ca ac a c bi e he i a i g ec ed if e add a
i Re e ed ag a iab e hi c e
 e po defa l
p op :
li :
pe: A a ,
eq i ed: e,
,
,
da a()
e n
i Re e ed: fal e,
;
,
comp ed:
comp edLi ()
if ( hi .i Re e ed)
con ne Li = [... hi .li ];
ne Li . e e e();
e n ne Li ;
el e
e n hi .li ;

,
;

N a e ha e d i gg e i Re e ed be ee e a d fal e a d

comp edLi i a a ica da e be ei he he igi a

e e ed i
 U e c m ed me he e
Thi igh a if

Y c ed d e e e ee e a e da e

a hi g

C ed a e a ea i a fea ei V e b he c e i ha
i e i e ha a e a hi e g e he a e a i e ec ed

Thi ea ha he a e i e e h d he he he a e ed
e he e

The f i gc e i e e he c ed a d i e e
ga hi g he c e

< empla e>

<di >
Thi i a e componen ha doe no hing.
</di >
</ empla e>

e po defa l
comp ed:
m Comp edP op()
con ole.log('Hello, i hi nning?');
e n 'Hello, o ld!';
,
,
;
T ge i e eed e he c ed ei he i
e a e i a he e h d e he e i c e

< empla e>

<di >
Thi i a e componen ha doe no hing.
<!-- U ing i in he empla e e ec e he comp ed p op -->
m Comp edP op
</di >
</ empla e>

I e bee ed b hi e e i e ha I ca c e

a e B h ge a di