Vue.js issue with v-for and arrays

Hi everyone,

I'm definitely new to Vue.js but I'm really enjoying it so far -except for this weird behaviour I'm having.

This is my data object:

data: {
    catalogs: []
}

The catalogs array is populated via an AJAX call using vue-resource calling the array push method. I can see from a console.log that the array has been populated.

Then, I have this section on my code:

<ul>
    <li v-for="catalog in catalogs">
        @{{ catalog.name }}
    </li>
</ul>

But this doesn't work! I get this error on my console:

Uncaught TypeError: Cannot read property 'parentNode' of null

To make it render correctly I tried to wrap it with a div and a v-if directive:

<div v-if="catalogs.length > 0">
    <ul>
        <li v-for="catalog in catalogs">
            @{{ catalog.name }}
        </li>
    </ul>
</div>

...but this does not work either! After much trial and error, I discovered that if I add an empty v-else directive, it works and it renders just fine.

<div v-if="catalogs.length > 0">
    <ul>
        <li v-for="catalog in catalogs">
            @{{ catalog.name }}
        </li>
    </ul>
</div>
<div v-else></div>

The question is... why? Am I doing something wrong? If anyone can point me in the right direction, please do, I can't really figure it out.

EDIT: JSFiddle with initial populated array (works): https://jsfiddle.net/b12tucho/

JSFiddle with initial empty array (does not work): https://jsfiddle.net/9d37pcux/1/

Uncaught TypeError: Cannot read property 'parentNode' of null