The previous graph is also loaded in the next graph in Vue.js

[leteu]

I've created a component that calls Mermaid, but it's still saving the old graph. Did i something wrong?

mermaid version : v9.1.4

<template>
	<Mermaid v-model="test1" />
    <Mermaid v-model="test2" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Mermaid from 'src/components/Mermaid'

export default defineComponent({
  name: 'IndexPage',
  components: {
    Mermaid
  },
  setup () {
    const test1 = `sequenceDiagram
      participant John
    `
    const test2 = `sequenceDiagram
      participant Alice
    `

    return {
      test1,
      test2
    }
  }
});
</script>

//Mermaid.vue Component

import { defineComponent, h, ref, onMounted } from "vue";
import mermaid from 'mermaid'

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  setup(props, { slots }) {
    const innerHTML = ref('');
    const needsUniqueId = "render" + (Math.floor(Math.random() * 10000)).toString();

    onMounted(() => {
      mermaid.mermaidAPI.render(needsUniqueId, props.modelValue, (html) => {
        innerHTML.value = html
      })
    });

    return () => h(
      'div',
      {
        innerHTML: innerHTML.value
      },
    )
  }
});

[hrgui]

I believe this is the same as #3305.

[ashishjain0512]

Hey @leteu

Could you please check whether the issue is reproducible in version 9.1.5 ? A fix regarding this issue was released with the new version, and you should not be facing this anymore.

If you still see this issue, kindly report back, and we will be happy to dig deeper.