How can I write HTML to my v-dialog's v-card component?

I want to render my custom HTML to my popup v-dialog component but I cant find a way to do so.

I have tried document.write() on the component but it changes the whole page's HTML while I want to change just the popups's.

<template>
  <div>
    <v-btn class="amber" fab small dark v-on:click.stop="dialog = true">
      <v-icon>message</v-icon>
    </v-btn>
    <v-dialog v-model="dialog" max-width="600px">
      <v-card>
        <v-card-title>Hello</v-card-title>
        <!--<v-card-text>{{showMessage()}}</v-card-text>-->
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialog: false
      }
    },
    methods: {
      showMessage() {
        document.write("<html><head></head><body><h2>Hello.</h2></body></html>")
      }
    }
  }
</script>

      <template v-if="header.value == 'Message'">
        <Popup></Popup>
      </template>

Solution

According to the documentation of Vue.js I found this:

https://v2.vuejs.org/v2/guide/syntax.html

You can use v-html directive. This is a example how to use it from the documentation:

<p>Using mustaches: {{ namepopup}}</p>
<p>Using v-html directive: <span v-html="namepopup.html"></span></p>