A comment post vue component

PostComment.vue

<template>
    <div class="wrapper" :class="classNivel">
        <div class="container">
            <img :src="urlFoto" />
            <div class="comentario">
                <div class="topo">
                    <a :href="urlPerfil" class="autor">{{ autor }}</a> -
                    <span class="tempo">{{ tempo }}</span>
                </div>
                <div>{{ texto }}</div>
                <div class="rodape">
                    Responder - Compartilhar
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PostComment',
    props: {
        id: Number,
        urlFoto: String,
        autor: String,
        urlPerfil: String,
        tempo: String,
        texto: String,
        nivel: Number
    },
    mounted: function() {
        if(this.nivel < 1 || this.nivel > 3)
            throw 'O nivel deve ser entre 1 e 3';
    },
    computed: {
        classNivel: function() {
            return {
                nivel1: this.nivel == 1,
                nivel2: this.nivel == 2,
                nivel3: this.nivel == 3
            }
        }
    }
}
</script>

<style>
    .wrapper { display: block; }

    .rodape { display: inline-block; }

    img {
        width: 48px;
        height: 48px;
        border-radius: 5px;
    }

    .container {
        display: inline-grid;
        grid-column-gap: 10px;
        grid-template-columns: 50px auto;
        margin: 10px 0 10px 0;
    }

    .autor { font-weight: bold; }

    .tempo { color: gray; }

    .nivel1 { padding-left: 0; }
    .nivel2 { padding-left: 20px; border-left: 2px rgb(72, 139, 194) solid; }
    .nivel3 { padding-left: 40px; }
</style>