VueJS обновляет компонент, сохраняя старые значения

Question

Я довольно новичок в VueJs.У меня есть Practice компонент, который содержит ExerciseMC компонент.Родительский компонент делает запрос и получает объект вопроса (со свойством text) со спины и передает его компоненту ExerciseMC в качестве реквизита.При первом отображении компонента текст отображается так, как должен, но во втором случае отображается новый заголовок, старый заголовок и т. Д. Я не могу понять, откуда взялась эта «память», но этоне тот результат, который я ожидал ...

Вот мой Practice компонент:

<template>
<div>
    <h2>Practice</h2>
    <div id="activity">
        <span id="init" v-if="type === 'init'">
            Click on the "Next step" button when ready
        </span>
        <span id="mc" v-else-if="type === 'mc'">
            <exerciseMC :ex="ex"/>
        </span>
        <span id="sa" v-else-if="type === 'sa'">

        </span>
    </span>
    <hr/>
    <button type="button" id="btnValidate" @click="validate()">Validate</button>
    &emsp;
    <button type="button" id="btnSkip" @click="skip()">Skip</button>
    &emsp;
    <button type="button" id="btnNextStep" @click="nextstep()">Next step</button>
</div>
</template>

<script>
    import ExerciseMC from '../exercises_temps/ExerciseMC'
    import axios from 'axios'

    export default {
        mounted(){
            console.log("Practicing");
            MathJax.Hub.Queue(["Typeset",MathJax.Hub, "activity"]);
        },
        components: {
            exerciseMC: ExerciseMC
        },
        data(){
            return {
                type: 'init',
                ex: Object
            }
        },
        methods: {
            validate() {
                console.log("Validate");
            },
            skip() {
                console.log("Skip");
            },
            nextstep(){
                console.log("Next Step");
                const path = "http://localhost:8000/user/next-step";
                axios
                    .get(path)
                    .then((response) => {
                        this.ex = {};
                        console.log("Response : ");
                        console.log(response.data);
                        this.ex = response.data;
                        this.type = response.data.type;
                    })
                    .catch((error) => {
                        console.log("Error");
                        console.log(error);
                    });

            }
        }
    }
</script>

А это мой ExerciseMC компонент:

<template>
<span id="exercise">
    <p id="text">{{ex.text}}</p>
</span>
</template>

<script>
    export default{
        props: {
            ex: Object,
        },
        mounted(){
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "exercise"])
        },
        beforeUpdate(){

        },
        updated(){
            console.log(this.ex);
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "exercise"])
        },
    }
</script>

Полезная информация: - Я использую MathJax для отображения математических формул в тексте - Я уже проверил ответ от axios и ex-prop в компоненте ExerciseMC: все в порядке (текст меняется каждый раз и содержиттекст для каждого упражнения)

Я, вероятно, что-то упускаю из-за реактивности Вуэйса, но все еще не могу понять это после некоторых исследований

Answer 1

Редактирование, так как мои предыдущие предложения не сработали.

Попробуйте использовать клавишу на вашем компоненте

<exerciseMC :key="ex.text" :ex="ex"/>