Rest API doesn't load data quick enough before the route is shown using vue.js and vue-router
<p>Using Vue.js with vue-router in unison with WP Rest API 2.
When I switch to a route I see the div appear that should hold the content, and then the content finally loads. I also get this error:</p>
<p>[Vue warn]: Error when evaluating expression &quot;content.content.rendered&quot;: TypeError: Cannot read property 'rendered' of undefined</p>
<p>The content will load on a computer eventually, even with the error, but on mobile the content doesn't show up at all. This is my method do grab a specific page. I have tried using nextTick but couldn't get it to function correctly.</p>
<p>Any help would be greatly appreciated, and please let me know if you need more information.</p>
<pre><code>&lt;template&gt;

&lt;div&gt; 
&lt;div class=&quot;animated cateringWrap&quot;&gt;
  &lt;h1&gt;{{ content.title.rendered }}&lt;/h1&gt;
  {{{ content.content.rendered }}}
&lt;/div&gt;
&lt;/div&gt;

&lt;/template&gt;



&lt;script&gt;
export default {
data() {
  return {
    content: []
  }
},


ready: function(){
  this.loadContent();
},

methods: {
  loadContent: function() {
    this.$http.get('http://localhost/t/wp-json/wp/v2/pages/82').then(function(response){
        this.content = response.data;
    });
     
 
  }
}

} 

&lt;/script&gt;
</code></pre>
<p><a href="https://i.stack.imgur.com/wj8us.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wj8us.png" alt="alt text" /></a></p>