I'm hitting this route: `http://site.dev/person/1`

And my component looks something like this:

```js
// PeopleComponent.vue

<template>

<div>
   <template v-if="person == null">
       <b>Error, person does not exist.</b>
   </template>

   <template v-else>
       <pre> {{ person }} </pre>
   </template>
</div>

</template>

<script>
export default {

    mounted() {
      this.$store.dispatch('getPeople');
    }

    computed: {

      // represents the person whose id potentially matches the value of `/:id` in route.
      person(){ 
          let id = parseInt(this.$route.params.id)
          let person = null

          if(id > 0)
              person = this.$store.state.people.find(p => p.id == id)

          return person;
      }

    }

}
</script>

// [styles]

```

What I'm doing in this component:
---------------------------------

> 
> I get an ID in my URL. The ID represents a specific resource being shown on this page. I have a `person()` computed property to retrieve the object whose ID matches the parameter in the URL from my Vuex store.
> 
> 
> 

The desired outcome:
--------------------

> 
> At the top of the page, I would like to display an error message if the object cannot be found (if say, for example, someone types an ID that doesn't exist in the array of objects in the store). If the item is found, a simple dump of the object is fine. **This currently works, but the delay between fetching the data from the API and finding the right object in the store seems to be just long enough to briefly show the error message as if the object could not be found when the page first loads. When tested with a slower network speed, this error message is visible for several seconds. I want to eliminate it such that it does not appear at all if the object exists.**
> 
> 
> 

What I've tried:
----------------

* `v-cloak` - tried applying this to every parent div, even the `div#app` itself, to no avail. I must be doing something wrong.
* `v-if` - as seen above in the example

Some pointers would be appreciated, thank you!

---

Update 31/03/2020
-----------------

As per Phil's suggestion, I tried to incorporate a flag to indicate when the page is ready. I did it in two different ways.

**Method #1**
Made the `mounted()` 'async' and added an await on the action that retrieves `people` from my API. Setting flag to true after it:

```js
async mounted() { 

  await this.$store.dispatch('getPeople');
  this.loaded = true;

}

```

But I still see the error message, briefly.

**Method #2**

Use a `then` callback on the action, and set the flag to `true` inside the callback

```js
mounted() {

  let vm = this

  vm.$store.dispatch('getPeople').then(() => {

      vm.loaded = true;

  })

}

```

Both methods don't stop the message from appearing.

I suspect that this is what's happening:

Core rule 

> 
> Error should ONLY show if `loaded=true` and `person=null`
> 
> 
> 

1. Page loads, `loaded` is `false` and `person` is `null`. Error won't show.
2. Page does a call to get people from API. Error still isn't showing.
3. After the call, `loaded` has been set to `true`
[At this point, `loaded` is `true` and `person` hasn't been resolved by the computed property yet, THIS is where I believe I'm seeing the error.]
4. Computed property finds the relevant record from the store on the next tick.
5. `Person` is no longer `null`, so the error disappears.

Edit 01/04/2020
===============

Answering Phil's question: `What does your getPeople() action look like?`

```js

getPeople({ commit })  {   
        axios.get('/get/people')
        .then(response => {
            commit("getPeople", response.data);
        })
        .catch(error => {
            console.log(error);
        })
},

```