I have a component, which looks like this:

```
export default {
  name: 'todos',
  props: ['id'],
  created () {
    this.fetchData()
  },
  data() {
    return {
    }
  },
  computed: {
    todos () {
      return this.$store.state.todos[this.id]
    }
  },
  methods: {
    async fetchData () {
      if (!this.$store.state.todos.hasOwnProperty(this.id)) {
        await this.$store.dispatch('getToDos', this.id)
      }
    }
  }
}

```

This is what's happening:

1. The component receives an `id` via props.

When the component loads I need to fetch some data based on the id

2. I have a `created()` hook from where I call a function `fetchData()` to fetch the data.
3. In methods, the `fetchData()` function dispatches an action to get the data. This gets and stores the data in Vuex store.
4. The computed property `todos` gets the data for this id.

The problem is that when the page first loads, the computed property `todos` shows up as undefined. If I change the page (client side) then the computed property gets the correct data from the store and displays it.

I am unable to understand why computed property doesn't update?