title: Slight delay in vue js computed property
body: <p>I am trying to build a test taking system in Vue and Laravel. Once a user enters the test code and email address,they are taken to the page to take the test, so using the testcode I pull in all the test questions using a navigation guard like so:</p>
  
  <pre><code>beforeRouteEnter (to, from, next) {
    axios.post('api/questions',{
      code: to.params.testcode
    })
    .then(response =&gt; {
      next(vm =&gt; {
        vm.testData = response.data //load testData object here
      })
    })
  }
  </code></pre>
  
  <p>As it is a test I also want them to be able to navigate through questions using next or previous buttons. So I used a computed property to manipulate the <code>testData.questions</code> so it returns 1 questions at a time:</p>
  
  <pre><code>paginatedData () {
    const start = this.pageNumber * this.size,
          end   = start + this.size;
    console.log(this.testData.questions.length)
  
    // return this.testData.questions.slice(start, end)
  }
  </code></pre>
  
  <p>Something odd happens here: <code>console.log</code> prints out 2 values: the first is an error while the second is the actual length of the questions array. Meaning there is a slight delay or so before the length of the array can be retrieved. So i used <code>setTimeout</code> to try to delay the <code>console.log</code> just to see what happens: </p>
  
  <pre><code>paginatedData () {
    const start = this.pageNumber * this.size,
          end   =  start + this.size;
  
    setTimeout(() =&gt; {
      console.log(this.testData.questions.length)
    }, 1000);
  
    // return this.testData.questions.slice(start, end)
  }
  </code></pre>
  
  <p>And now the result is just a single value (array length) and no error is printed.</p>
  
  <p>What could be the cause for this?</p>