Vuex経由で取得したプロパティの変更を監視しても、前後の結果が同じになる

App.vue

<template>
    <div class="container">
        <button @click="onClick"/>
            Click
        </button>
    </div>
</template>

<script>
import Vue from 'vue';
import { mapGetters } from 'vuex';

export default {
    methods: {
        onClick() {
            this.sample.values.push(1);
        }
    },
    computed: {
        ...mapGetters({
            sample: 'sample/getSample'
        })
    },
    watch: {
        sample: {
            handler: function(newVal, oldVal) {
                console.log(JSON.stringify(val));
                console.log(JSON.stringify(newVal));
            },
            deep: true
        }
    }
};

/stores/sample/index.js

export const state = () => ({
    sample: {
        id: '',
        values: [1, 2, 3, 4, 5]
    }
});

const actions = {};
const getters = {
    getSample: state => {
        return state.sample;
    }
};
const mutations = {};

export default {
    namespaced: true,
    state,
    actions,
    getters,
    mutations
};

上記のような実装をしていて、App.vueはsampleの変更を検知した場合に、watchが走り、newVal、oldValをそれぞれ受け取ります。という想定でいたのですが、実際にこのコードを実行しても、

{"id":"","values":[1,2,3,4,5,1]}
{"id":"","values":[1,2,3,4,5,1]}

というような表示しかされず、deepオプションを付与しても有効化されません。
どのようにしたら良いか、ご教授お願いします。