Reactivity is not working

[caiokawasaki]

I'm having trouble with reactivity, every 5 seconds I call my API to reload my data.

This is my users data:

{
attended: 12
id: "3FVuDVADfEVZieJdc7ZJt6gAeiH6ZHRH"
logged_in_at: "6:58"
loyal_customers: 102
name: "Prof. Heather Parker Jr."
pending: 49
pending_waiting_time: "4:15"
tma: "9:22"
wallets: []
} 

Except for the name and loged_in_at, all data changes constantly.

However if the isotope is being sorted by the pending property, and the pending is updated the order by the first sort.

Am I doing something wrong?

This is my component:

<template>
    <div class="operation-container">
        <isotope ref="isotope" class="isotope-container" :options="isotopeOptions" :list="users">
            <user-card v-for="user in users" :key="user.id" :user="user"/>
        </isotope>
        <transition name="fade" mode="out-in">
            <div v-if="showFilters" class="filters-container" v-on-clickaway="hideFilters">
                <string-input placeholder="Pesquisar por nome" type="text"
                              v-model="isotopeFilterText" @input="filter('filterByText')"/>
                <btn class="small" value="Nome" title="Filtrar por nome" @click.prevent.native="sort('name')"/>
                <btn class="small" value="Pendentes" title="Filtrar por pendentes" @click.prevent.native="sort('pending')"/>
            </div>
            <a v-else class="filters-trigger" href="#" title="Clique aqui para exibir os filtros"
               @click.prevent="showFilters = true">
                <svg x="0px" y="0px" viewBox="0 0 26 26">
                    <path d="M25.989,0.945c-0.041-0.291-0.194-0.549-0.429-0.725c-0.487-0.364-1.178-0.266-1.543,0.22l-8.923,11.898c-0.142,0.19-0.22,0.424-0.22,0.661v8.244l-3.747,1.873V13c0-0.237-0.078-0.471-0.22-0.661L3.304,2.203h15.645c0.607,0,1.101-0.494,1.101-1.102S19.556,0,18.949,0H1.101C0.865,0,0.63,0.078,0.441,0.22C0.205,0.397,0.053,0.654,0.011,0.945C-0.03,1.236,0.044,1.526,0.22,1.762l8.704,11.605v11.532c0.001,0.17,0.041,0.34,0.116,0.491c0.271,0.543,0.934,0.766,1.478,0.493l5.948-2.973c0.376-0.188,0.609-0.565,0.609-0.984v-8.557L25.78,1.762C25.956,1.526,26.03,1.236,25.989,0.945z"/>
                </svg>
            </a>
        </transition>
    </div>
</template>

<script>
    import dashboardsApi from '../../../../api/dashboards'
    import {mixin as clickaway} from 'vue-clickaway'
    import isotope from 'vueisotope'
    import UserCard from './components/UserCard'

    export default {
        name: 'OperationalDashboardIndex',
        data() {
            return {
                dashboardTimer: null,
                users: [],
                isotopeOptions: {
                    getFilterData: {
                        filterByText: (item) => {
                            return item.name.toLowerCase().includes(this.isotopeFilterText.toLowerCase());
                        },
                        showAll: () => {
                            return true
                        }
                    },
                    getSortData: {
                        name: (item) => {
                            return item.name.toLowerCase()
                        },
                        pending: (item) => {
                            return item.pending
                        }
                    },
                    sortBy: "original-order",
                    masonry: {
                        isFitWidth: true
                    }
                },
                isotopeFilter: "showAll",
                isotopeFilterText: null,
                isotopeSort: 'original-order',
                showFilters: false
            }
        },
        components: {
            isotope,
            UserCard
        },
        mixins: [clickaway],
        methods: {
            hideFilters() {
                this.$refs.isotope.filter('showAll')

                this.showFilters = false

                this.isotopeFilterText = ''
            },
            filter(key) {
                this.$refs.isotope.filter(key)
            },
            sort(key) {
                this.$refs.isotope.sort(key)
            }
        },
        created() {
            dashboardsApi().operational.responsibles()
                .then(({data}) => {
                    this.users = data.data
                })
        },
        mounted() {
            this.dashboardTimer = setInterval(() => {
                dashboardsApi().operational.responsibles()
                    .then(({data}) => {
                        _.forEach(data.data, (responsible) => {
                            let index = _.findIndex(this.users, (user) => {
                                return responsible.id == user.id
                            })

                            if (index > -1) {
                                this.users.splice(index, 1, responsible)
                            } else {
                                this.users.push(responsible)
                            }
                        })
                    })
            }, 5000)
        },
        destroyed() {
            clearTimeout(this.dashboardTimer)
        }
    }
</script>

<style lang="scss" scoped>
    .operation-container {
        .isotope-container {
            margin: 0 auto;
        }

        .filters-trigger {
            background: $blue;
            position: fixed;
            display: flex;
            bottom: 20px;
            right: 20px;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            @include boxShadow(5px, $darkBlue, .25);
            align-items: center;
            justify-content: center;
            transition: .4s;

            svg {
                display: block;
                fill: #fff;
                width: 25px;
                height: 25px;
            }

            &:hover {
                @include boxShadow(10px, $darkBlue, .35);
            }
        }

        .filters-container {
            position: fixed;
            background: #fff;
            bottom: 20px;
            right: 20px;
            border-radius: 4px;
            padding: 20px;
            width: 300px;
            /*height: 400px;*/
            @include boxShadow();
        }
    }
</style>

[caiokawasaki]

I was able to do what I wanted, but I had to do something ugly to get around the reactivity...

pending: (item) => {
    let search = _.find(this.users, (user) => {
        return user.id === item.id
    })

    return search.pending
}