Live changes to Vue component if database table modified

I'm so new to Vue JS. Just building a simple app with Laravel & Vue JS for practice.

I'm looking for something so that my Vue Component can load any changes which are are associated with Vue methods.

Template:

<template>
    <div v-for="user in users" :key="user.id">
        
    </div>
</template>

Script:

export default {
    data() {
        return {
            users: {},
            form: new Form({
                name: '',
                email: '',
                password: '',
                password_confirmation: ''
            })
        }
    },

    methods: {
        createUser() {
            this.form.post('api/user')
                .then(response => {
                    // Success
                    fire.$emit('afterCreate');
                })
                .catch(error => {
                    // Error
                });
        },

        loadUsers() {
            axios.get('api/user').then(({ data }) => (this.users = data.data));
        }
    },

    created() {
        this.loadUsers();
        fire.$on('afterCreate', () => {
            this.loadUsers();
        });
    }
}

The above code works fine. E.g. When I add new user it load new users.

But I want to load users to Vue component, when the users table of database gets update. If anybody Insert/Update/Delete user from another computer, I should see the update from my computer.

Thats it!

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2CFnQeG
via IFTTT