TL;DR

Поместите свой тег <script> в конец <body> или создайте экземпляр Vue после того, как целевой узел будет готов обратного вызова.

Задний план

При локальном тестировании интеграции ZenUML я заметил (не очень) интересную вещь. Компонент Vue не заменяется (см. ниже).

Затем я отладил код и заметил, что при выполнении JS тело еще не готово. Поскольку тело не готово, VueJs не сможет найти целевой узел для замены и, таким образом, потерпит неудачу.

Решение

Поставьте тег <script> в конце. Или оставьте тег <script>в разделе ‹header> и вызовите инициацию экземпляра Vue в конце.

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

Обсуждение

Это работает иначе, чем AngularJs. В AngularJs фреймворк будет ждать, пока DOM будет готов для начала рендеринга (упрощенно). VueJs — менее навязчивый фреймворк и меньше магии. Так что приходится со всем справляться самой.