TL;DR

Umieść tag <script> na końcu <body> lub utwórz instancję Vue, gdy węzeł docelowy będzie gotowy do wywołania zwrotnego.

Tło

Podczas lokalnego testowania integracji ZenUML zauważyłem (niezbyt) interesującą rzecz. Komponent Vue nie jest wymieniany (patrz poniżej).

Następnie debugowałem kod i zauważyłem, że podczas wykonywania JS treść nie jest jeszcze gotowa. Ponieważ treść nie jest gotowa, VueJ nie będzie w stanie znaleźć węzła docelowego do zastąpienia, w związku z czym nie powiodło się.

Rozwiązanie

Umieść znacznik <script> na końcu. Lub zostaw <script>tag w sekcji ‹header> i wywołaj na końcu inicjację instancji Vue.

<body>
<main id="demo">
  <seq-diagram></seq-diagram>
</main>
<script>
  window.app = new Vue({
    el: '#demo',
    store
  })
</script>
</body>

Dyskusja

Działa to inaczej niż AngularJs. W AngularJs framework będzie czekać, aż DOM będzie gotowy do rozpoczęcia renderowania (nadmierne uproszczenie). VueJs jest mniej inwazyjnym frameworkiem i robi mniej magii. Dlatego musisz poradzić sobie ze wszystkim sam.