Vue js conditional class binding not considering the latest change

in a nested tree menu i can not change the class of the last non expandable item but i can listen the events , get the value from the parent component as expected. operation wise it works but i can not show/visualize which item was selected . here is the complete code. here the prop selectedIntID is the INT_ID selected by the child componet pemited to its parent then prop back to the child component for comparison with INT_ID to update the class.

/ *______________________TreeBrowser.vue (Global Component)______________________________________ */
<template>
<div>
   <div class="node" @click="nodeClicked">
        <span v-if="hasChildren" class="type" :class="[expanded ? 'fas sucess fa-folder-open' : 'fas fa-folder']" ></span>
        <span v-else><span  class="bg-success" ></span><span :class="[ isSelected ? 'fas fa-user-check' : 'fas fa-user']"></span></span>
        {{ node.name }}
   </div>

   <TreeBrowser
   v-if="expanded"
   v-for="child in node.children"
   :key="child.INT_ID"
   :node="child"
   @nodeSelected="(node) => $emit('nodeSelected', node)"
   />
   </div>
</template>

<script>
export default {
    data(){
return{
    expanded: false,
}
    },
    props: {
        node: Object, depth:{ type:Number, default:1, },
        selectedIntID:{ type:Number, default:1, }
    },
    methods: {
nodeClicked(){
    this.expanded = !this.expanded;
    if(!this.hasChildren){ this.$emit('nodeSelected', this.node); }
}
    },
    computed: {
        hasChildren() { return this.node.children; },
        isSelected(){ return this.node.INT_ID === this.selectedIntID; }
    },
};
</script>

in the parent componet i listen feed the props and listen events only.