Axios can't set data : <p>Here's my data:</p>

<pre><code>data: function(){
    return {
        contas: [{id: 3,
            nome: "Conta de telefone",
            pago: false,
            valor: 55.99,
            vencimento: "22/08/2016"}] //debug test value
    };
},
</code></pre>

<p>And here's my get request:</p>

<pre><code>beforeMount() {
    axios.get('http://127.0.0.1/api/bills')
        .then(function (response) {
            console.log("before: " + this.contas);
            this.contas = response.data;
            console.log("after: " + this.contas);
        });
},
</code></pre>

<p>The problem is I can't access <code>this.contas</code> from within <code>axios.get()</code>. I've tried <code>Vue.set(this, 'contas', response.data);</code> and <code>window.listaPagarComponent.contas = response.data;</code> without success.</p>

<p>My console shows:</p>

<pre><code>before: undefined
after: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
</code></pre>

<p>But Vue Devtools shows only:</p>

<pre><code>contas: Array[1]
  0: Object
    id: 3
    nome: "Conta de telefone"
    pago: false
    valor: 55.99
    vencimento: "22/08/2016"
</code></pre>

<p>Here's my <a href="http://pastebin.com/3Seqkk6L" rel="noreferrer" title="pastebin">full code</a>.</p>
