javascript - vuex parameter binding problem solving-PHP Chinese Network Q&A

The definition of parameters in the component is as follows

<script>
import store from '../vuex/store';

export default {
    // vuex: {
    //     actions: actions,
    //     getters: {
    //         // 过滤后的会话列表
    //         sessions: ({ sessions, filterKey }) => {
    //             let result = sessions.filter(session => session.user.name.includes(filterKey));
    //             return result;
    //         },
    //         // 当前会话index
    //         currentId: ({ currentSessionId }) => currentSessionId
    //     }
    // },
    data(){
        return {
            sessions: store.state.sessions,
            currentId: store.state.currentSessionId
        }
    },
    methods:{
        selectSession(id){
            console.log(id);
            store.dispatch('selectSession', id)
        }
    }
};
</script>

<template>
<p class="list">
    <ul>
        <li v-for="item in sessions"  :class="{ active: item.id === currentId }" @click="selectSession(item.id)">
            <img class="avatar"  width="30" height="30" :alt="item.user.name" :src="item.user.img">
            <p class="name">{{item.user.name}}</p>
        </li>
    </ul>
</p>
</template>

Can the definition of sessions be bidirectionally bound? I found that when the selectSession method was executed, the sessions did not change. Is there something wrong with it?

//来自 vuex 官方例子 // js computed: { message: { get () { return this.$store.state.obj.message }, set (value) { this.$store.commit('updateMessage', value) } } }