Vue: Array directly inside array does not get watched

[amcsi]

Vue.js version

2.0.1

Reproduction Link

http://jsfiddle.net/amcsi/o9v0ayrw/7/

Steps to reproduce

1. Press Create Text
2. Press the + button
   

   What is Expected?

The text should have appeared right when pressing Create Text; instead you had to press +

What is actually happening?

On first instantiation of the VueJS app, if you observer the initial data, you'll see that the inner array doesn't have any watchers assigned to it; there is the inner loop in the template that iterates that array, so I'd expect a watcher be created for that.

Interestingly if any other vue method is triggered that is being watched by vue, the view appears to refresh and the texts that have been added to the inner array now appear apparently.

Here is a longer example of a commit where I fixed the issue in my real world case:
https://github.com/amcsi/skill-builder/commit/9fd3e7efbf3dd2fac425b25a89a6f2cf6c8db200

I was using an empty array directly within an array, and that empty array didn't have any watchers automatically set even though I was iterating it in the template. By changing the inner array to instead be an object with a property with that empty array, I was able to get watchers to watch the empty array.

I think this is bug; you shouldn't have to wrap your arrays in objects if you don't want to I think.

EDIT: updated description according to JSFiddle reproduction

[posva]

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

[amcsi]

@posva

Alright, while trying to reproduce it, it turned out that whether the initial array was empty or not didn't matter. However the issue of no watching is still there.

Here's a fiddle: http://jsfiddle.net/amcsi/o9v0ayrw/7/

Steps to reproduce:

1. Press Create Text
2. Press the + button

Actual:
See that after pressing the + button the new text appears

Expected: The text should have appeared right when pressing Create Text

[posva]

This is working as intended. You'll find a better explanation here :smile:

[amcsi]

@posva I did read that in the docs, but if you see my example, you'll see that I am using .push() whose changes vue is supposed to detect.

Also, that doesn't explain how it works that changing my inner array into an object contain an array and doing the same push, but instead of doing this.table[0][0].push('abcdef'), doing this.table[0].arr[0].push('abcdef'), also by using .push()

But I can include an example of that too

[posva]

It's because you directly access an element in the array arr[0]

[yyx990803]

Seems it indeed should be working but is not.

[posva]

My bad, sorry @amcsi