title: VueJS Syntax: Running method on mount
body: <p>I would like to load some data with <code>vue-resource</code> when a page loads, then re-load that data if a refresh button is pressed.</p>
  
  <p>To keep my code <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="nofollow noreferrer">DRY</a> I wanted to put this functionality in a method. This was my first attempt:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;div id="app"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>const Vue = window.Vue = require("vue");
  require("vue-resource");
  const App = require("./components/App.vue");
  
  window.app = new Vue({
      el: "#app",
      render: h =&gt; h(App)
  });
  </code></pre>
  
  <p>components/app.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
          &lt;p&gt;{text}&lt;/p&gt;
          &lt;button @click="loadData"&gt;Reload&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      // This fails
      mounted: this.loadData,
      methods: {
          loadData() {
              // This syntax may be wrong, too. But the function isn't
              // even running, so I haven't started to debug this yet
              this.$http.get("https://icanhazip.com")
                  .then(xhr =&gt; this.text = xhr.body);
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>This throws an error on line 10 of <code>components/app.vue</code>:</p>
  
  <pre><code>    mounted: this.loadData,
  </code></pre>
  
  <p>Saying <code>Uncaught TypeError: Cannot read property 'reloadData' of undefined</code></p>
  
  <p>How can I get the <code>mounted</code> function to refer to any of the methods defined in <code>methods</code>?</p>