表更新和AJAX调用

Question

I'm fairly new to Vue so I'm not sure whether being stupid or not.

I have a table that needs to be updated at a regular interval, so far I've used AJAX to make a call to an API and return the data and that all works great. I'm able to display all my data as required, the issue I'm facing, and this is where my knowledge gets fuzzy, is that on each AJAX call my entire table appears to be getting re-rendered, I thought, or rather hoped, that Vue would only "replace" the data that has changed not the whole table.

Is such a thing possible or am I asking too much?

I've included my code below incase I'm doing something wrong.

App.vue

<template lang="pug">
    .user-agent-overview
        .container
            av-table(:columns="columns" :agentData="agentData") 
</template>

<script>
    import axios from 'axios';

    import avTable from './Table';

    export default {
        data() {
            return {
                agentData: null,
                columns: [
                    'Agent Name',
                    'Status',
                    'First Log in',
                    'Last Log out',
                    'Total On duty',
                    'Total Inbound',
                    'Total Outbound',
                    'Average Talk time',
                    'Total Talk time',
                ],
            };
        },
        created() {
            this.fetchAgentData();
        },
        methods: {
            fetchAgentData() {
                this.error = null;
                this.agentData = null;
                this.loading = true;

                axios
                    .get('/api/v1/ajax-dashboard-aircall/agents')
                    .then(response => {
                        this.agentData = response.data.user_agents;
                    })
                    .catch(error => {
                    });
            },
        },
        components: {
            avTable,
        },
        mounted() {
            // this.$nextTick(() => {
            //  setInterval(function() {
            //      this.fetchAgentData();
            //  }.bind(this), 5000);
           // });
        },
    };
 </script>

Table.vue

<template lang="pug">
    table.table
        thead
            tr
                th(v-for="column in columns") {{ column }}
        tbody
            tr(v-for="(data, dIndex) in agentData" :key="dIndex")
                td(v-for="(item, iIndex) in data" :key="`${iIndex}-${iIndex}`") {{ item }}
</template>

<script>
    import axios from 'axios';

    export default {
        props: ['columns', 'agentData'],
    };
</script>

Thanks David