Почему Vue пересоздаёт el?

Question

[Сергей Соколов]

Пытаюсь в один и тот же div рендерить то Backbone View, то Vue. Динамически переключать компоненты. Такие вт «трудности переходного периода» – приходится какое-то время иметь дело с обеими технологиями в одном проекте.

Выясняется, что Vue пересоздаёт элемент, назначенный ему:

var el = document.getElementById('app');
// ...
new Vue({el: '#app'});
el === document.getElementById('app') // false

Почему так происходит, можно ли это обойти или надо создавать какой-то промежуточный элемент, и в него уже прикреплять Vue?

Fiddle где в один div по кнопкам рендерится то Backbone View, то Vue. Но после «работы» Vue назад к Backbone уже не вернуться, т.к. пересоздан div и нет больше ссылки на него.

Upd. нашёл:

Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases.

Comments

[ⓒⓢⓢ]

Пытаюсь в один и тот же div рендерить то Backbone View, то Vue. Трудности переходного периода.

чего только не встретишь ... =)

[Сергей Соколов]

JRK_DV, а кому щас легко？！）

Answer 1

[Дмитрий Беляев]

https://jsfiddle.net/oura9szf/42/
Так?

Comments

[Сергей Соколов]

Нет, так Vue аппендится к дну Backbone'а:

[Дмитрий Беляев]

Сергей Соколов, нужно перетирать старое?
обновил ответ

[Сергей Соколов]

Дмитрий Беляев, да, я разобрался, почему и как обойти – достаточно вложить в общий div ещё один div-прослойку для Vue, которую он пускай и заменяет своей DOM. Проще, чем $mount() и appendChild()

Answer 2

[Сергей Соколов]

Выходит, минимальный костыль это для Vue внутри «общего» элемента создавать ещё один div, который и скармливать как el во Vue.

appel.innerHTML = '<div></div>'; // дополнительный контейнер, его Vue заменит своей DOM
  instance = new Vue({
    el:'#app>div',
    template: '<p>I am {{ who }}!</p>',
    data: {who:"a Vue view"}
  });

Фиддл