Vue.js devtool change not showing up

I am currently working with moment.js inside a Vue component but I am not seeing certain changes show up in vue devtools.

My example:

export default {
    data() {
        return {
            moment: moment(),

        };
    },
    methods: {
        prevMonth() {
            this.moment.subtract(7, 'days');
        },
        nextMonth() {
            this.moment.add(7, 'days');
        }
    }
};

I am guessing this has something to do with the fact that I am calling a method on my moment data property instead of manipulating it directly like a number. An example like this works perfectly and updates my count in the vue devtools:

export default {
    data() {
        return {
            count: 0,

        };
    },
    methods: {
        prevMonth() {
            this.count--;
        },
        nextMonth() {
            this.count++;
        }
    }
};

Is there any way to force the vue devtools to reload or show my change in any way?

Answer

Vue cannot detect certain changes inside an object, read this explanation from the official documentation to understand it better.

I think the easiest way to do what you are trying to achieve is to make a new date from your existing one in your prevMonth/nextMonth methods and assign it to this.moment, like so:

prevMonth() {
    this.moment = moment(this.moment).subtract(1, 'month');
},

See working JSFiddle example.