Vue: Is there a way to detect changes data coming from API

Question

What Im looking is simple. As soon as I render my template it will make an API-Call to my Webserver and render the data to the template. Now I want to watch these datas in the vue component for coming changes. Whenever something has changed I want to update the template with the data coming from the API.

One Solution is that I could write something like a refresh method that will be called every 10 seconds. (Tbh. that is sth. that i dont want)

I want a way like Angular with observers.

Btw. Im new to vue and I started learning Vue with Laravel

Edit: My Code:

Vue.component

<template>
<div class="w-50">
    <table class="table ">
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" v-bind:key="user.id">
                <td>{{ user.name }}</td>
                <td>{{ user.timer }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                users: [],
                user: {
                    id: '',
                    active: ''
                }
            };
        },
        mounted() {
            axios.get('/users')
                .then(res => {
                    this.users = res.data;
                    console.log(res.data);
                })
        }
    }
</script>

I did as you mention below. But the view is not updating if the data changes.

Answer 1

You can use vue-rx to work with Observables in Vue.js.

The following demo makes an AJAX call every 10 seconds to the API service that returns a random joke:

new Vue({
  el: '#demo',
  subscriptions: function () {
    return {
      joke: rxjs.timer(0, 10000).pipe(
        rxjs.operators.switchMap(() => rxjs.ajax.ajax('https://geek-jokes.sameerkumar.website/api')),
        rxjs.operators.map(res => res.response) 
      )
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-rx.js"></script>
<div id="demo">{{ joke }}</div>