title: Vue: How to wait until one method completes before firing another
body: <p>I have two methods on my Vue instance;</p>
  
  <pre><code>const app = new Vue({
    el: '#app',
    data: {
     id: null
    },
    methods: {
     getId: function() {
       return axios.get('url')
       .then(response =&gt; response.data)
       .then(id =&gt; this.id = id)
       .catch(error =&gt; console.log(error))
     },
  
     foo: function() {
      console.log(this.id)
     }
   },
   mounted: function() {
   this.getId()
   this.foo()
   }
  })
  </code></pre>
  
  <p>The <code>console.log()</code> logs <code>null</code> as the value because it runs before the response <code>getId()</code> has managed to set the <code>id</code> value. I know this because when I use Vue developer tools, the id is the actual value I was expecting rather than <code>null</code>.</p>
  
  <p>How can I make sure <code>getId()</code> has set the value before running <code>this.foo()</code> ?</p>