new Vue の初期化時に template プロパティを設定すると、el で指定したDOMがtemplateで置き換わってしまいます。
Railsなどで作成されるWebアプリでVue.jsを利用する際に、サーバーでDOMの出力はできているのにVueがそれを邪魔してしまう場合があります。
new Vue({
el: '#app',
template: '<div class="children">Hello world!</div>'
})
// <div id="app"><div class="children">Hello world!</div></div>
//
// ではなく
//
// -> <div class="children">Hello world!</div>
Vue.jsの1.xまでは、replace: false を指定することでこの問題を回避できましたが、2.0でreplaceプロパティが削除されました。
そこでこの記事では、Vue.js 2.0 以降でDOMを置換されたくない場合の解決策をご紹介したいと思います。
適用対象のDOMで改めてラップする
new Vue({
el: '#app',
template: '<div id="app"> ... </div>'
})
置換を許可しないオプションが存在しないので、templateの中で改めて元の要素でラップします（囲います）。
クラスや属性が無いシンプルな要素の場合に利用するのが良いでしょう。
renderプロパティを使う
new Vue({
el: '#app',
render: function (createElement) {
createElement('div', {
attrs: {
id: 'app',
}
}, /* ... */)
}
})
Vueクラスの render プロパティを利用することでも元の要素を作ることができます。
render には描画のための関数を渡します。
その引数から要素を作成するcreateElement関数が参照できます。
createElementの第一引数にはタグ名、第二引数にはオブジェクトで要素の属性指定のためのデータオブジェクトを渡します。
第三引数には子ノードを文字列か配列で指定することができます。
第二引数に指定するデータオブジェクトは細かい指定が可能ですので、一度ドキュメントを読んでおくことをおすすめします。
この記事の参考URL：Vue 1.x からの移行 — Vue.js