[Vue]v-ifとv-forを同じタグ内に書いたら、v-ifが無視される件

問題のコード

期待する挙動をしてくれないコード

<ul>
    <li v-if="objs.length" v-for="obj in objs">
        {{ obj }}
    </li>
    <li v-else>
        オブジェクトがないよ！
    </li>
</ul>

今回省略しているが、objsに何かオブジェクトが入っていたとして、それを「v-for」を使って「objs」を1つずつ「obj」に格納し、出力しているとします。
そして、同じliタグ内に「v-if」を書いていて、objsの個数がfalseのとき（つまりobjsの中身がないとき）、
pタグが出力される、という挙動を期待したとします。

実行すると…

このコードを実行しても、残念ながらpタグが出力されず、期待した挙動を行ってくれません。

v-forはv-ifより先に実行され、v-ifはそのまま素通りされる

実は、今回のv-if/v-forの両ディレクティブは、v-forの方が先に実行される、という特徴があります。

つまり、liタグの中で、v-ifより先にv-forが実行され、objsの中に何も入っていなかった場合は、もちろんここには何も出力されることはない。
そこで、liタグ内のv-ifを、それからでも実行してくれると良いのだが、残念ながらそうはいかず、liタグを抜けてしまい、pタグに入ってしまうそうな。
もちろん、v-ifの判定もしていないので、v-elseは素通りされ、結果的に何も表示されないという挙動になってしまうわけです。

代替案

期待する挙動をしてくれるコード

<ul v-if="objs.length">
    <li v-for="obj in objs">
        {{ obj }}
    </li>
</ul>
<ul v-else>
    オブジェクトがないよ！
</ul>

このように、v-ifを1階層上のタグに移すことで、対応できます。
ありがとうございました。