title: How to get a variable to bind from xhr call response in VueJS?
body: <p>Ok I'm a beginner at VueJS and I'm just trying to do a simple XHR call and bind the json data response to my variable...</p>
  
  <p>I have a component App.vue and this part of the template I want to show the results of the json. bpi is the name of the variable</p>
  
  <pre><code>&lt;div id="simulationPoints"&gt;
      &lt;h2 className="logTitle"&gt;Full Log:&lt;/h2&gt;
      {{ bpi }}
  &lt;/div&gt;
  </code></pre>
  
  <p>then my script</p>
  
  <pre><code>export default {
    name: 'App',
    data: () =&gt; ({
      bpi: []
    }),
    mounted: () =&gt; {
      axios.get(`https://api.coindesk.com/v1/bpi/historical/close.jsonp?start=2011-01-01&amp;end=2018-02-01`)
        .then(response =&gt; {
          this.bpi = response.data.bpi
        })
        .catch(e =&gt; {
          this.errors.push(e)
        })
    }
  }
  </code></pre>
  
  <p>This doesn't seem to work. I'm using Axiom to fetch the data and assign the response, and this is how all the examples I found online did it, but the array object I have is still empty and it doesn't render on the page. I don't know whats the issue here? A Vue expert please help :)</p>