почему кнопка назад браузера испортила мой компонент Vue?

Question

Итак, у меня есть компонент vue (первый, который я вижу в своем приложении, он называется Intro.Vue), который выглядит следующим образом:

Когда я нажимаю оранжевую кнопку, чтобы перейти кдругой компонент все вроде ок.Но когда я нажимаю кнопку «Назад» браузера, чтобы вернуться к моему компоненту Intro.vue, все портится и выглядит так:

Есть идеи о том, что здесь может происходить?

Я использую сетку CSS для макета моего приложения.

мой код:

<template>
<div class="my-container">
    <div class="text1">{{frase_inicial}}</div>
    <div class="my-video">
        <div id="my-video">
            <h1>Video explicativo</h1>
        </div>
    </div>

    <div class="go-button">
        <router-link to="/crear">
        <img id="go-button" src="src/assets/comenzar-button.svg">
        </router-link>
    </div>

    <div class="text2">{{que_es}}</div>

    <div class="text3">{{expl_mixmatch}}</div>
</div>
</template>

<script>
export default {
  name:'intro',  
  data () {
    return {
    frase_inicial: '¿Quieres diseñar un peluche muy original?',
    que_es: '¿Qué es Mix&Match?',
    expl_mixmatch: 'Mix&Match es el juego que permite a los niños armar sus propios peluches Monomono y darles un nombre original que llevarán bordado. ¡Con imaginación, libertad y alegría!'
    }
  }
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Raleway');
html{
    font-family: 'Raleway';
}

.my-container{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "text1" "my-video" "go-button" "text2" "text3";

}

.text1{
    grid-area: text1;
    text-align: center;
    font-weight: bold;
    font-size: 3em;
    color: white;
    margin-top: 1em;
}
.my-video{
    grid-area: my-video;
    text-align: center;
    font-size: 2em;
    margin-top: 1em;
    display: grid;
    grid-template-columns: 100%;

}
#my-video{
   background: white;
   width: 640px;
   height: 480px;
   justify-self: center;
}

.go-button{
    grid-area: go-button;
    text-align: center;
    font-size: 2em;
    margin-top: 1em;
}

#go-button{
    height: 150px;
    width: 150px;
}

.text2{
    grid-area: text2;
    text-align: left;
    font-size: 2em;
    font-weight: bold;
    color: white;
    margin-top: 1em;
    margin-left: 1em;

}
.text3{
    grid-area: text3;
    text-align: left;
    font-size: 1.8em;
    margin-top: 1em; 
    color: white;
    margin-left: 1em;
    margin-bottom: 3em;
}

</style>

Answer 1

Проблема заключалась в том, что у меня был A.vue компонент с теми же именами классов CSS, что и B.vue, который был перенаправлен с A, а в A я не объявлял Scoped в его стиле, поэтомуон использовал стиль B, который генерировал материал на экране, чтобы испортить.