I come from jQuery background and just recently started using Vue. I'm trying to learn as much as I can and I'm trying to develop a simple user search and view details app however I am getting stuck and can't seem to find a way out to proceed forward.

[![enter image description here](https://i.stack.imgur.com/pFgAA.png)](https://i.stack.imgur.com/pFgAA.png)

I've a layout of three components - Nav.vue, Search.vue, UserProfile.vue as in the picture. UserProfile.vue is inside router view. I'm using Vuex store with states userId and username and I've defined mutations to commit the state changes.

When user searches by providing username in Search component I'm fetching users list from API on left sidebar. When user clicks on one of the search result I'm committing userId state and looking to fetch from API and display the user profile on the UserProfile component using the userId retrieved from Vuex store. The UserProfile component is inside router view.

Vuex store.js:
--------------

```
export default new Vuex.Store({

state: {
    userId:"",
    username: ""
}

mutations: {

  setUserId (state, payload) {
    state.userId = payload
  },

  setUsername (state, payload) {
    state.user.username = payload
  },
}

});

```

On Search.vue
-------------

```
Search.vue (outside  <router-view />)
-------------------------------------
<a href="#" @click="viewProfile" class="btn btn-info" >View Profile</a>

methods: {

    viewProfile() {
        this.$store.commit("setUserId", this.userId);
        this.$store.commit("setUsername", this.username);
    }
}

```

On UserProfile.vue
------------------

I'm getting userId from state from a computed property.

```
UserProfile.vue (inside  <router-view />)
-------------------------------------------

computed: {
    userId () {
      return this.$store.state.userId
    }
  }

```

Now I want to fetch data from API and display the data in UserProfile component based on the selected userId which I'm retrieving from Vuex store but I'm stuck. Any pointer would be helpful.
Thanks in advance.