vuex 질문

사이드바에 추천으로 뜨는 앱을 랜덤으로 띄우고 싶어서 코드를 짜보았습니다

코드 구조는
1. vuex store.js 에 0부터 6까지의 정수 하나를 랜덤으로 뽑는 mutations 함수를 만들어서 randomIndex라는  state에 저장
2. 사이드바가 열릴때마다 randomIndex를 뽑아달라고 커밋함
3. Sidebar.vue 에 해당 randomIndex를 데이터바인딩해서 원하는 앱과 설명을 랜덤으로 띄움
4. 이게 문제인데, 해당 추천 앱을 클릭시 추천 앱에 해당하는 인덱스 넘버를 Home.vue에 커스텀이벤트로 전송해서 띄움

인데.. 앱 랜덤으로 띄우는건 잘 되는데, Home.vue에 전달할 randomIndex와 띄워진 앱의 randomIndex가 달라서 다른 앱이 열립니다.
store.js

Home.vue

버튼 클릭시 RandomIndex 커밋하는부분

Sidebar.vue 에서 커스텀이벤트로 randomIndex 보내서 windowState에 지정한 부분

Sidebar.vue

처음에는 randomIndex 자체를 보냈다가, recommendApps 배열의 id값을 보내는게 더 맞는거같아서 이렇게 했습니다.

논리적으로 무조건 맞는거같은데 왜 $emit으로 보낸 randomIndex와 Sidebar.vue에서의 randomIndex가 다른 값인걸까요..