Vuex State Spice продолжает удалять последний элемент

Question

Я создал список в каждом списке, я настроил метод удаления.Каждый раз, когда я щелкаю список в моем jsfiddle, я получаю то, что хочу, но когда я присоединяю свой проект с помощью vuex, создается впечатление, что индекс неверен.Он просто продолжает удалять последний элемент в моем списке, независимо от того, где я нажимаю.вместо того, который я нажимаю.

    <md-table>
    <md-table-row v-for="(opt, index) in this.getAddedSegmentationList" :key="index">
        <md-table-cell>
            <ul >
                <li>Name: API_NEEDS_TO_BE_UPDATED</li>
                <li>Created: {{opt.created_time | newTime}}</li>
                <li>Finished: {{opt.end_time | newTime}}</li>
            </ul>
            <ul class="channel-segements__tab-handlers">
                <li class="channel-segements__tab-handlers-items" @click="removeSegement(index, opt)">
                    <md-icon>delete</md-icon>
                </li>
            </ul>

        </md-table-cell>
    </md-table-row>
</md-table>


    methods: {

        removeSegement(index, opt) {

            this.getAddedSegmentationList.splice(index, 1)

        }
},


    computed: {
        getAddedSegmentationList() {
            return this.$store.state.channels.channelSegmentList
        }
},

Мой оригинальный jsfiddle https://jsfiddle.net/ronoc4/eywraw8t/65812/ для тестирования, чтобы убедиться, что это было возможно.