How to make it so that when adding a new object to json, this object dynamically appears on the page without reloading the page?

Question

Vue.js

I get a json object using axios, this is a list of objects in my database and I display it on the page in a cycle, I want it to dynamically appear on the page without reloading the page when an object is added to the database, now it only appears when the page is reloaded

Here is the code:

new Vue({
    el: '#items_app',
    data: {
    items: []
    },
    created: function () {
        const vm = this;
        axios.get('/api/list/')
        .then(function (response) {
        vm.items = response.data
        })
    }
}

)

html:

<div id="items_app">

        <div v-for="item in items">
            <p style="color: white">{{ item.name }}</p>
        </div>

    </div>

Answer 1

Either by a button to re-request data, or by a timer (not a very option), or through a web socket / services like pusher from the server, send an event to the client, by which to request new data (well, or send this data directly in the body of the event)