Как связать каждый div с элементом Vue, как если бы один div был родительским?

Question

Как childDiv может быть присоединен только к переменной 'new' в экземпляре childDiv Vue, а не с переменной 'new' в parentDiv

<div id="parentDiv">
   <button v-if="new">New</button>
   <div id="childDiv" v-if="new">This is child div</div>
</div>

<script>
var parentDiv = new Vue({
  el:'#parentDiv',
  data: {
     new: true,
  }
})

var childDiv = new Vue({
  el:'#childDiv',
  data: {
     new: false,
  }
})
</script>

Answer 1

Это никогда не сработает. Вам придется изменить имя переменной. Даже тогда ваш первый экземпляр Vue будет жаловаться, что, скажем, new2 не существует в экземпляре, но на него ссылаются во время рендеринга.

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

Я не уверен, что понимаю ваш вопрос, но я думаю, что встроенные шаблоны могут быть вам полезны здесь