Компонент не перерисовывается при изменении вычисляемого значения

Question

Когда вычисленное значение изменяется, мой PreviewExerciseItem не перерисовывается. Вычисленное значение получено из моего магазина vuex.

Я не изменяю свое состояние vuex, я устанавливаю новый объект. Это моя мутация:

selectedWorkout: (state, workout) => {
  state.selectedWorkout = {...workout};
}

Получатель: selectedWorkout: (state) => state.selectedWorkout,

Вот мой компонент. Компонент PreviewExerciseItem не перерисовывается при изменении выбранного selectedWorkout, но h1 about корректно обновляется

<template>
    <div v-if="selectedWorkout">
        <h1 v-if="selectedWorkout">{{selectedWorkout.exercises[1].progression}}</h1>
        <PreviewExerciseItem v-for="(exercise, index) in selectedWorkout.exercises" :key="exercise.presetKey" 
            :exercise="exercise" :index="index" :selected="selectedExercise === index"
            v-on:click.native="selectedExercise = index"/>

    </div>
</template>

<script>

import db from '@/api/db'
import { mapGetters, mapActions, mapState } from "vuex";
import PreviewExerciseItem from "@/components/PreviewExerciseItem.vue"


export default {
    components: {
        PreviewExerciseItem
    },
    async asyncData({ store, params }) {
        await store.dispatch('selectedRoutine', params.id);
        return { routineId: params.id }
    },
    computed: {
        ...mapGetters(['user', 'selectedRoutine', 'selectedWorkout']),
    },
    watch: {
        user: async function (user) {
            const status = await db.fetchRoutineStatus(user.uid, this.routineId);
            this.$store.dispatch('selectedWorkout', status);
            console.log('Workout1', this.selectedWorkout) // Logs correctly updated Object
        },
        selectedWorkout: function (selectedWorkout) {
            this.workout = {...selectedWorkout};
            console.log('Workout2', this.selectedWorkout) // Also updated object
            this.$forceUpdate();    // Not doing anything
        }
    },
}
</script>

РЕДАКТИРОВАТЬ: Проблема, вероятно, с моей мутацией. Когда я использую state.selectedWorkout = JSON.parse(JSON.stringify(workout)); вместо state.selectedWorkout = {...workout}; , это работает. Я думал, что state.selectedWorkout = {...workout}; назначит новый объект, но кажется, что это не так. Мне не очень нравится решение JSON, есть ли лучший способ назначить новый Objet? Я также попробовал state.selectedWorkout = Object.assign({}, workout), который тоже не работает.

Answer 1

Вам необходимо использовать эту форму JSON.parse(JSON.stringify(workout)); для глубокого клонирования объекта workout.

Глубокий клон