Vue2 trigger render on an independent component over vuex - laravel

Question

Inside of a Laravel app I have two independent vue components and I would like to trigger a re-render on the second component.
I use vuex where I already trigger a store mutation and I can see that the data is updated but the component will not re-render.
export default {
store: store,
. //code logic
.
.
methods: {
store: {
//axios async request where on success I trigger store mutation
self.$store.dispatch('getApprovals', 'testing/approvals'); //I can see in console the store request response
}
}
}
than the second component which should re-render
<template>
<div class="portlet light">
<div class="portlet-title tabbable-line">
<div class="caption">
<i class="icon-social-twitter font-dark hide"></i>
<span class="caption-subject bold uppercase">Approvals</span>
</div>
<div class="caption" style="float: right;">
</div>
<ul class="nav nav-tabs">
<li class="active">
Pending
</li>
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="tab_actions_pending">
<div class="mt-actions">
<div class="mt-action" v-for="approval in $store.state.approvals.approvals"
v-show="approval.status === 'pending'">
<div class="mt-action-body">
<div class="mt-action-row">
<div class="mt-action-info ">
<div class="mt-action-icon ">
<i class="icon-magnet"></i>
</div>
<div class="mt-action-details ">
<span class="mt-action-author"
v-show="approval.request_type == 'Timeoff Request'">{{ approval.request_type }} - {{ approval.type }}</span>
<span class="mt-action-author"
v-show="approval.request_type !== 'Timeoff Request'">{{ approval.request_type }} </span>
<p class="mt-action-desc"
v-show="approval.request_type == 'Timeoff Request'">{{
parseFloat(approval.days).toFixed(1) }} day/s requested</p>
<p class="mt-action-desc"
v-show="approval.request_type == 'Timeoff Request'">{{ approval.from}} -
{{ approval.to}}</p>
</div>
</div>
<div class="mt-action-datetime ">
</div>
<div class="mt-action-buttons ">
<span class="label label-warning"> Pending </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import store from './store';
import {editItem} from './actions';
export default {
vuex: {
getters: {
getApprovals: state => {
return state.approvals
}
}
},
store: store,
created() {
this.$store.dispatch('getApprovals', 'testing/approvals');
},
data() {
return {
approvals: {},
alert: {
show: false,
type: null,
title: null,
message: null,
}
};
}
}
</script>
How do we deal with this cases?