vue v-for array isn't updating - vue.js

Question

I am making simple chat App
Input name from index.vue
const newUser = {
id: this.$store.state.user.stateWebSocket.getUniqueID(),
name: this.username,
room: this.room,
};
this.$store.commit("user/putUser", newUser);
Show userList on chat.vue
<ul id="users">
<li v-for="user in userList" :key="user.id">
{{ user.name }}
</li>
</ul>
Get userList on chat.vue by using computed from store
userList() {
return this.$store.state.user.users;
},
store array users on user.js
putUser(state, user) {
// state.newUser = user;
// console.log("state newUser: ", state.newUser);
state.users.push({
id: user.id,
name: user.name,
room: user.room,
});
console.log("users array on users.js: ", state.users);
},
state:{
users: [],
}
For example, when first user has joined, I can see first user is on userList
<li v-for="user in userList" :key="user.id">
{{ user.name }}
</li>
and after Second user has joined, I can see the first user and Second user are on the userList; however It doesn't reflect on the first user's view.
After when I press f5 button(refresh), It shows on the userList.
What I want is to reflect as new user has joined without any refresh.
Comments will be helpful.