Help please, how to refresh the data of child component after i post some data on main component?

The "right" way to do this would be to use events. Basically, your add bet function would emit the new value, the sidebar, listening for that event would update the value accordingly.

@willvincent Thank you for your reply sir! can u check may code sir, I'm getting bus is not defined

// my app.js
Vue.component('games-show', require('./components/games/show.vue'));
Vue.component('sidebar-amount', require('./components/sidebar.vue'));

const bus = new Vue();

const app = new Vue({
    el: '#app'
});

parent.vue

import sidebar from '../../components/sidebar.vue';

export default {
    
    // i use mixins? is this correct?
    mixins: [sidebar],

    // then may method
    methods: {
        AddBet: function (value) {
            // post
            // then
           bus.$emit('sidebar', this.userPoints());
    }
}

sidebar.vue

<template>
<h3 class="media-heading f-w-300 text-center m-t-0 m-b-0 text-muted">
₱ {{ userPoints.amount }}
</h3>
</template>

<script>
    export default {
        props: ['user'],

        data() {
            return {
                userPoints: [],
            }
        },

        mounted() {
            this.getUserPoints();
        },

        methods: {
            getUserPoints() {
                bus.$on('sidebar', function () {
                   this.getUserPoints();
                });
                this.$http.get('/api/user/' + this.user.id)
                    .then(response => {
                        this.userPoints = response.data;
                });
            },
        }
    }
</script>

@Encrypt You can use Vuex as well to give centralised state management

http://vuex.vuejs.org/en/intro.html

got it! thanks!

https://laracasts.com/discuss/channels/vue/use-a-global-event-bus

app.js

Object.defineProperty(Vue.prototype, '$bus', {
    get() {
        return this.$root.bus;
    }
});

Vue.component('games-show', require('./components/games/show.vue'));
Vue.component('sidebar-amount', require('./components/sidebar.vue'));

var bus = new Vue({}) // This empty Vue model will serve as our event bus.

const app = new Vue({
    el: '#app',

    data: {
        bus: bus // Here we bind our event bus to our $root Vue model.
    }
});

sidebar.vue

<template>
<h3 class="media-heading f-w-300 text-center m-t-0 m-b-0 text-muted">
₱ {{ userPoints.amount }}
</h3>
</template>

<script>
    export default {
        props: ['user'],

        data() {
            return {
                userPoints: [],
            }
        },

        mounted() {
            this.getUserPoints();

            this.$bus.$on('updatePointsEvents', event => {
                this.getUserPoints();
            });
        },

        methods: {
            getUserPoints() {
                this.$http.get('/api/user/' + this.user.id)
                    .then(response => {
                        this.userPoints = response.data;
                });
            },
        }
    }
</script>

show.vue

import sidebar from '../../components/sidebar.vue';

export default {
    
    // i use mixins? is this correct?
    mixins: [sidebar],

    // then may method
    methods: {
        AddBet: function (value) {
            // post
            // then
           this.$bus.$emit('updatePointsEvents', this.userPoints  );
    }
}