Vue.js elで指定した要素にはv-directiveは効かない。メモ。

あまりこういう使い方はしないかもしれないけど、いちおメモ。

v-directiveが効かなくなる条件

デモ

html

<div id="app">
    <div id="inner" v-if="active"></div>
</div>

javascript

var AppInner = new Vue({
    el: '#inner',
});

var App = new Vue({
    el: '#app',

    data: {
        active: false,
    },
});

この場合、appのdataであるactiveがfalseなので、
inner部分は表示されて欲しくないんだけど、
表示されます。
ということ。

まとめ。

このような使い方をしなければ良いだけですね。