Vue component using the <code> does not re-render on change of prop

I am making a code snippet that shows the code of a html element. The snippet is suppose to change on press of buttons on other component. The text displayed on snippet is passed as prop to the code snippet component.

<template>
  <pre class="language-html" id="code-section">
    <code>{{sourcecode}}</code>
  </pre>
</template>

<script>
export default {
  name: "CodeSnippest",
  props: {
    sourcecode: String,
  }
}

The problem is that the display of the component does not change while the prop is changing (checked on Vue devtools).

It might be the fact that code tag contains several spans, but I'm not sure.

The actual text is not directly in code tag, but in span inside it

Here's the use of the snippet component:

<template>
  <div>
    <v-row class="my-5">
       ... 
    <code-snippest **:sourcecode="code"** />
  </div>
</template>

<script>
import CodeSnippest from "./CodeSnippest.vue";
export default {
  name: "PlayGround",
  components: {
    CodeSnippest,
  },
  data() {
    return {
      baseTag: "button",
      baseClass: "btn",
      additionalClass: "outline",
      additionalColor: "red",
      outline: false,
      staticc: false,
      text: "button",
      colors: ["red", "sunset", "sea", "white", "whale"],
    };
  },
  computed: {
    code() {
      return `
      <${this.baseTag} class="${this.baseClass} ${
        this.outline ? this.additionalClass : "bg"
      }-${this.additionalColor} ${this.staticc ? "static" : ""}">${
        this.text
      }</${this.baseTag}>
      `;
    },
  },
};
</script>

The data changes by buttons and checkboxes, the computed is 100% changing.

Any ideas? Thank you!