Loading HTML file content in a Vue component

Tao's answer is spot on and is very similar to how I've solved this issue for myself in the past.

However, I'd like to throw in an alternative iframe approach that could work in case reactivity is important. Here's a codesandbox link

The only difference is that this approach loads the code/HTML via XHR and writes it manually into the iframe. Using this approach, you should be able to add some reactivity if necessary.

<script>
export default {
  components: {},
  data() {
    return {};
  },
  async mounted() {
    this.initialize();
  },
  methods: {
    async initialize() {
      const html = await this.loadHTML();
      const doc = this.htmlToDocument(html);
      this.updateIframe(doc);
    },
    async loadHTML() {
      const response = await fetch("/plot");
      const text = await response.text();
      return text;
    },
    htmlToDocument(html) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");
      return doc;
    },
    updateIframe(doc) {
      const iframe = this.$refs.frame;
      const iframeDocument = iframe.contentWindow.document;
      iframeDocument.open();
      iframeDocument.write(doc.documentElement.innerHTML);
      iframeDocument.close();
    }
  },
};
</script>

In the codesandbox, I've thrown in two additional methods to give you an example of how reactivity can work with this approach:

    modify() {
      if (this.orig) {
        // Only for the purpose of this example.
        // It's already been modified. Just short-circuit so we don't overwrite it
        return;
      }
      const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
      // Get access to the data..not sure if there's a better/proper way
      const models = [...bokehDoc._all_models.values()];
      const modelWithData = models.find((x) => x.data);
      const { data } = modelWithData;
      const idx = Math.floor(data.Close.length / 2);
      // Store old data so we can reset it
      this.orig = data.Close[idx];
      data.Close[Math.floor(data.Close.length / 2)] = 0;
      modelWithData.change.emit();
    },
    reset() {
      if (!this.orig) {
        return;
      }
      const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
      // Get access to the data..not sure if there's a better/proper way
      const models = [...bokehDoc._all_models.values()];
      const modelWithData = models.find((x) => x.data);
      const { data } = modelWithData;
      const idx = Math.floor(data.Close.length / 2);
      data.Close[idx] = this.orig;
      modelWithData.change.emit();
      delete this.orig;
    }

Strategy:

1. insert and init bokeh in head tag of public/index.html
2. read file in a string via ajax/xhr and parse as dom tree
3. extract each needed dom element from the parsed tree
4. recreate and append each element

No iframe needed. window.Bokeh is directly accessible.

A skeletal example of reactivity is suggested through the method logBkh that logs the global Bokeh object when clicking on the graph

<template>
  <div id="app">
    <div id="page-container" @click="logBkh"></div>
  </div>
</template>

<script>
// loaded from filesystem for test purposes
import page from 'raw-loader!./assets/page.txt'

// parse as dom tree
const extDoc = new DOMParser().parseFromString(page, 'text/html');

export default {
  methods: {
    logBkh(){
      console.log(window.Bokeh)
    }
  },
  mounted() {
    const pageContainer = document.querySelector('#page-container')

    // generate and append root div
    const dv = document.createElement('div')
    const { attributes } = extDoc.querySelector('.bk-root')

    for(const attr in attributes) {
      dv.setAttribute(attributes[attr].name, attributes[attr].value)
    }
    pageContainer.append(dv)
    
    for(const _scrpt of extDoc.body.querySelectorAll('script')) {

      // generate and append each script
      const scrpt = document.createElement('script')

      for(const attr in _scrpt.attributes) {
        scrpt.setAttribute(
          _scrpt.attributes[attr].name,
          _scrpt.attributes[attr].value
        )
      }
      scrpt.innerHTML = _scrpt.innerHTML
      pageContainer.append(scrpt)
    }
  }
}
</script>

result: