title: Vue2 data not being updated in template after retrieving from url
body: <p>I am using Vue.js version 2, trying to update a variable which is used in the view. </p>
  
  <p>Bear with me, I have the following code:</p>
  
  <pre><code>new Vue({
      el: '#products',
  
      data: {
         showProductModal: false,
         product: {}
  
      },
  
      methods: {
  
        retrieveProduct(id) {
          axios.get('/product/'+id).then(function (response) {
              this.product = response.data;
              console.log(this.product);
          });
        }
    }
  </code></pre>
  
  <p>Please note that:</p>
  
  <ul>
  <li>The <i>product</i> variable is initialized as an empty object {};</li>
  <li>The "retrieveProduto()" method is called after the user clicks a button. It then makes an API call and, after the promise resolves, updates the <i>product</i> variable.</li>
  <li>I am using axios to make the http request, and it returns a <i>response</i> object, where <i>response.data</i> is the content of the returned object.</li>
  </ul>
  
  <p>The console.log(this.product) results in</p>
  
  <blockquote>
    <p>{id: 1, name: "Lemon cake", description: "Traditional lemon cake", pic_url: "", category_id: 1, …}</p>
  </blockquote>
  
  <p>which is exactly the expected output. However, upon calling {{ product }} in the view, the template is not updated in any way, and gets stuck forever in {}.</p>
  
  <p>I have also tested if two-way databinding is working, and the answer is yes. Actually, everything is working perfectly apart from this. Am I doing something wrong? Should I expect that the template is not updated after retrieving an object from a promise?</p>
  
  <p>Any help is appreciated. Thank you in advance.</p>
  
  <p><b>EDIT:</b></p>
  
  <ul>
  <li>The part of the template in which I call the variable is just a  {{product}} for testing purposes. </li>
  <li>The reason why I am calling <i>self</i> is that I was using <i>this.product</i> in my first attempts. I have seen this <a href="https://stackoverflow.com/a/45282704/3999482">solution elsewhere</a> and changed it so I could give it a shot. Since it didn't work, I am changing it back to <i>this</i></li>
  <li>Printing <i>console.log(this)</i> returns the complete Vue object, and it has the <em>product</em> property set correctly, but still not reflecting in the template.</li>
  </ul>