Vue Vuex Component Not Updating When Store Changes

Question

I am having a reactivity gotcha with Vue Vuex. I'm using an open source countdown timer. In the code below item.dueDate reacts properly when the active item changes in the $store, (the new date shows on the page), however, the data passed to Countdown doesn't update. It holds the old value. It does work the first time, though. So, it's not updating. Why not? Thanks!!

    <template>
        <v-layout>
            <v-flex>
                <v-card v-if="item">
                    <v-card-text>
                        <h3>Countdown {{item.name}} - {{item.dueDate}}</h3>
                    </v-card-text>
                    <Countdown v-if="item.dueDate" :deadline="item.dueDate"></Countdown>
                </v-card>
            </v-flex>
        </v-layout>
    </template>

    <script> 
    import Countdown from 'vuejs-countdown'

    export default {    
      components: { Countdown },
      computed: {
                activeItem(){
                return this.$store.getters.activeItem
            },
            item(){
                return this.$store.getters.loadedItem(this.activeItem)
            }
        }
    }
    </script>

Answer 1

The problem was with the Countdown module that I imported. When I opened it up, I saw why the component wasn't updating as expected.

The Countdown module sets the data only once on mounted

    mounted() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

So, if the component stays on the page as data changes, then it never updates again. I solved this by modifying the module to add an updated method, which did the trick...

    updated() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

Cheers, S