How to put Vue code inside <code> tag in vue

This is my first time making an npm package, I'm making the package's demo, and I wanna put an example of the component usage.

when I put the component usage inside pre and code tag like this

it shows this error

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

this is my code (App.vue):

<template>
<pre>
    <code>
        <template>
            <vlider
            :id="'first'"
            :vlider-data="slider"
            :theme="'theme-dark'"
            v-model="inputRange"
            @click="vliderClick()"
            >
                <template> slot="bullet" slot-scope="bullet"
                    <label>{{ bullet.data.label }}</label>
                    <i
                    class="em"
                    :class="[`em-${bullet.data.extras.icon}`]"
                    ></i> 
                    <a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
                </template>
            </vlider>
        </template>
        <script>
            import Vlider from "vlider";

            export default {
                name: "app",
                components: {
                    Vlider
                },
                data() {
                    return {
                        inputRange: null,
                        slider: [
                            {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                            {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                            {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                            {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                            {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                            {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                        ]
                    };
                },
                watch: {
                    inputRange() {
                        console.log(this.inputRange)
                    }
                },
                methods: {
                    vliderClick() {
                        console.log(`clicked`)
                    }
                }
            };
        </script>
        <style>
            import "vlider/src/sass/vlider.scss"
        </style>
    </code>
</pre>
</template>

<script>
import Vlider from "vlider";
...
</script>

I expect it to work like how normal tag in HTML works. I've tried downloading some code blocks npm packages, it still doesn't work, i need you guys helps and suggestions with this, thanks for your help

user v-html [docs][1] and don't forget to use \ after every line break to continue the string and ignoring '' as text context by \'

so it shall be :

    <div v-html="example">
     <pre>
      ...
     </pre>    
    </div>

or

<div>
  {{example}}
</div>

and example you define it inside data() [1]: https://v2.vuejs.org/v2/guide/syntax.html?#Raw-HTML