I have a Vue component that rendering diff editor of Monaco. Once I have more than one instance of it on the same page, the diff is only shown in the first one.

template:

<template>
    <div>
      <div ref="diffEditor" class="vue--monaco-diff-editor"></div>
    </div>
</template>

script:

  async mounted(): Promise<void> {
    await this.importMonacoPackage();
    this.$nextTick(() => {
      if (!monaco) {
        throw new Error('monaco is not initialized');
      }

      const originalModel = monaco.editor.createModel(
        this.versions[0].code,
        MonacoHelper.markdownLangToMonacoLang(this.versions[0].lang),
      );
      const modifiedModel = monaco.editor.createModel(
        this.versions[1].code,
        MonacoHelper.markdownLangToMonacoLang(this.versions[1].lang),
      );

      let diffEditorElement = this.$refs.diffEditor;
      this.diffEditor = monaco.editor.createDiffEditor(
        diffEditorElement as HTMLElement,
        {
          scrollbar: {
            vertical: 'hidden',
            horizontal: 'hidden',
            handleMouseWheel: true,
          },
          wordWrap: 'on',
          readOnly: true,
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false,
          },
          automaticLayout: true,
        },
      );

      if (!this.diffEditor) {
        return;
      }

      this.diffEditor.setModel({
        original: originalModel,
        modified: modifiedModel,
      });

      // set the editor height to scale with the content height automatically
      // see https://github.com/microsoft/monaco-editor/issues/794
      const originalContentHeight = this.diffEditor
        .getOriginalEditor()
        .getContentHeight();

      const modifiedContentHeight = this.diffEditor
        .getModifiedEditor()
        .getContentHeight();

      let contentHeight = Math.max(
        originalContentHeight,
        modifiedContentHeight,
      );

      // allow for a single empty line at the bottom, default line height is 18px
      contentHeight = contentHeight + 18;

      const domNode = this.diffEditor.getDomNode();
      domNode.style.height = `${contentHeight}px`;
      this.diffEditor.layout();
    });
  },
  methods: {
    async importMonacoPackage() {
      // eslint-disable-next-line import/no-unresolved
      monaco = await import('../../../lib/monaco-editor');
    },
  },

I'm using
"monaco-editor": "^0.24.0","vue": "^2.6.13". any ideas what I'm doing wrong ? and why just the first instance showing the diff highlights?