Vuex：更新的状态值不会传播到组件

Question

在我的应用程序中实现Vuex存储，当商店中的值发生变化时，我无法对组件进行更新。

这是基本商店

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        test : 0
    },
    mutations: {
        UPDATE_DATA: (state) =>{
            state.test = 1
        },
    },
    actions:{
        SET_DATA : () => {
           store.commit('UPDATE_DATA')
        }
    }
});

export default store

以下组件，接缝以检索初始值（test = 0）

Vue.component('my-component', {
    data() {
      return {
        test: this.$store.state.test
      }
    }
})

当我在控制台中使用store.dispatch('SET_GANTT_DATA')调用商店操作时，商店中的值更新（我可以在devtools中读取它），但组件中没有更改。