как иметь Vuex mapState с вычисляемыми свойствами в vuejs

Я пытаюсь изучить Vuex и попытался добавить mapState с локальным вычисляемым свойством в моем приложении Vuejs 2.0 поверх Laravel 5.4, теперь при добавлении я получаю следующую ошибку:

Syntax Error: Unexpected token, expected , (379:32)

  377 |         },
  378 |         mapState({
> 379 |             contactStore: state => state.contactStore
      |                                 ^
  380 |         })
  381 |     }
  382 | }

Вот мой компонент:

<template>
    <div class="row">
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <th class="text-left">Contact Name</th>
                        <th class="text-left">Company Name</th>
                        <th class="text-left">City</th>
                        <th class="text-left">Email</th>
                        <th class="text-left">Mobile</th>
                        <th class="text-left">Type</th>
                        <th class="text-left">SubType</th>
                        <th class="text-left">Profile</th>
                    </tr>
                    <tr v-for="(item, index) in tableFilter">
                        <td class="text-left"><a @click="showModal(item)" data-toggle="modal" data-target="#showContactModal">{{ item.first_name+' '+item.last_name }}</a></td>
                        <td class="text-left">{{ item.company.name }}</td>
                        <td class="text-left">{{ item.city }}</td>
                        <td class="text-left">{{ item.email }}</td>
                        <td class="text-left">{{ item.mobile }}</td>
                        <td class="text-left"><span class="badge badge-info">{{ item.company.type }}</span></td>
                        <td class="text-left"><span class="badge badge-info">{{ item.company.sub_type }}</span></td>
                        <td class="text-left"><span class="badge badge-info">{{ item.profile }}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        data(){
            return {
                id: '',
                search: '',
                model: []
            }
        },
        computed: {
            tableFilter: function () {
                const searchTerm = this.search.toLowerCase();
                if(this.model)
                {
                    return this.model.filter((item) =>
                        (item.first_name.toLowerCase().includes(searchTerm)
                            || (item.last_name !==null && item.last_name.toLowerCase().includes(searchTerm))
                            || (item.company.name !==null && item.company.name.toLowerCase().includes(searchTerm))
                        );
                }
            },
            mapState({
                contactStore: state => state.contactStore
            })
        }
    }
</script>

Я пытаюсь заменить вычисляемое свойство фильтра таблицы текущим состоянием списка контактов, как я могу этого добиться, или я делаю какую-то ошибку, даже если я делаю ...mapState({}), он показывает мне тот же тип ошибки:

Syntax Error: Unexpected token (378:8)

  376 |             }
  377 |         },
> 378 |         ...mapState({
      |         ^
  379 |             contactStore: state => state.contactStore
  380 |         })
  381 |     }

что можно сделать подскажите. Спасибо