Vuexで、storeにcommit後に、ストアに渡した値が変わってしまう

Question

###やりたいこと
vue.jsでvuexを使用し、ストアでデータを管理するアプリを作成しています。
フォームに入力された文字をストアにコミットし、コミット後にフォーム内の文字を空（リセット）したいと思っています。

###発生している現象
watchでストアの状態を監視し、コミット後のストアの状態変更後にフォームを空にしたのですが、ストア内の文字も空になってしまいます。
コードは、以下の通りです（省略している部分もあります）。

// store.js
const store = new Vuex.Store({
    state: {
        info: null
    },
    getters {
        getInfo(state) { return state.info }
    },
    mutations: {
        setInfo(state, payload) {
            state.info = payload
        }
    }
})
export default store

<template>
    <input v-model="list.name" type="text">
    <div class="button" @click="commit">
</template>

<script>
export default {
    data: function() {
        return {
            info: {
                name: ''
            }
        }
    },
    mounted: function() {
        // ここで、ストアの変更を監視
        this.$store.watch(
            (state, getters) => getters.getInfo,
            (newValue, oldValue) => {
                this.info.name = '' // コミットの完了後、dataの「name」を空にする
                alert(newValue.name) // newValueも空になってしまう
            }
        )
    },
    methods: {
        commit: function() {
            this.$store.commit('setInfo', this.info) // ここでストアにコミット
        }
    }
}
</script>

###解決したいこと
ストアに文字列を格納後、フォーム内の入力文字を空（リセット）したいです。上記のコードで、修正すべき部分を教えていただけると助かります。

Answer 1

一応自分なりに解決しましたので、その方法を記します。
フレームワークとはいえJavaScriptなので、引数に渡した配列は参照渡しされているものと思われます。そこで、参照を切ってからコミットすることで、上手く行きました。

methods: {
    commit: function() {
        let name = this.info.name  // 参照を切るために、「name」変数に代入
        this.$store.commit('setInfo', name)
    }
}