vuepress/dockerbuild/dot_vuepress/components/graph.vue

<template>
  <div>
    <div :id="id" v-show="noshow">
      <slot></slot>
    </div>
    <div class="image" v-html="image"></div>
  </div>
</template>

<style scoped>
.input {
  position: fixed;
  bottom: 0;
  left: 0;
  top: 56px;
  width: 100%;
  height: 100%;
}

.image {
    position: relative;
}
</style>


<script>

export default {

  data() {
    return {
      id : 0 ,
      noshow : false ,
      dots: 'digraph "x"{\n  1->2\n  5->2;\n  1->3;\n  3->4;\n  4->1\n}'
    }
  } ,

  /*
  beforeMount() {
    var newScript = document.createElement("script"); 
    newScript.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js' ) ;
    document.body.appendChild(newScript);
  } ,
  */
  created() {
    this.id = Math.floor(Math.random() * 5000);
  } ,

  mounted() {
    var slotdata = document.getElementById(this.id) ;
    console.log ( { slotdata , text : slotdata.outerText }  ) ;
    this.dots = slotdata.outerText ;
    // this.image = Viz( slotdata.outerText , {format: 'svg'});
  } ,

  computed: {
    image : function(){
      var image = Viz(this.dots, {format: 'svg'});
      return image;
    }
  }
}

</script>