Ping.js

import axios from 'axios'

export default {
    namespaced: true,
    state: {
        statusPing: 1
    },
    getters: {
        getStatusPing: state => state.statusPing
    },
    mutations: {
        SET_PING_STATUS: (state, payload) => state.statusPing = payload
    },
    actions: {
        pollPing({ commit }) {
            commit('SET_PING_STATUS', 1)
            axios.get('/ping').then(() => commit('SET_PING_STATUS', 0))
        }
    }
}

Ping.vue

<template>
    <div>
        <div id="circle" :style="getStatusPing === 0 ? 'background: green;' : 'background: #cccc00;'" />
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'Ping',
        props: {
            delay: {
                default: 5
            }
        },
        computed: {
            ...mapGetters('Ping', ['getStatusPing'])
        },
        created() {
            this.polling = setInterval(() => {
                this.pollPing()
            }, this.delay * 1000)

            return this.pollPing()
        },
        methods: {
            ...mapActions('Ping', ['pollPing'])
        },
        beforeDestroy: () => {
            clearInterval(this.polling)
        }
    }
</script>

<style scoped>
    #circle {
        width: 10px;
        height: 10px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
</style>

TestApp.vue

<template>
    <b-container>
        <Ping delay="5"/>
    </b-container>
</template>

<script>
    export default {
        name: 'PageNotFound',
        components: {
            Ping: () => import('@/components/Ping')
        },
    }
</script>