[Vuejs]-Hydration completed but contains mismatches – Ascii art in a vue component

hydration needs no difference between result HTML that client rendered and result HTML that server rendered. So you needed to render DOM(ascii art string) at mounted cycle not created cycle like below.

<template>
            <div class="ascii">
                <pre id="ascii-art">{{ name }}</pre>
            </div>
    </template>
        
    <script>
    export default {
        name: "Header",
        components: {
            Prompt
        },
    
    data() {
                return {
                        name: 'Error occurred while initializing name property',
                    };
            },
    mounted() {
        try {
            this.name = 'ascii art';
        }
    },
    }
    </script>