title: Vue.js - Props are undefined in component method
body: <p>I am beginning to integrate Vue.js in to a Django project (multi-page application).</p>
  
  <p>To start I am trying to create a simple logout component that will POST to the route for logout. The endpoint for the route comes from Django's <code>url</code> template tag.</p>
  
  <p>The endpoint prop is <code>undefined</code> within the component method. Though it is available within the component template. What am I doing wrong?</p>
  
  <hr>
  
  <p><strong>Django Template</strong></p>
  
  <pre><code>&lt;div id="logout"&gt;
      &lt;logout endpoint="{% url 'account_logout' %}"
              csrf_token="{{ csrf_token }}"&gt;&lt;/logout&gt;
  &lt;/div&gt;
  {% render_bundle 'logout' %}
  </code></pre>
  
  <p><strong>logout.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Logout from './Logout.vue'
  
  
  new Vue({
      el: '#logout',
  
      components: {
          Logout
      }
  });
  </code></pre>
  
  <p><strong>Logout.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;span class="logout-link"
                @click="performLogout"&gt;
  
              Logout
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      export default {
          name: 'logout',
  
          props: [
              'csrf_token',
              'endpoint'
          ],
  
          data () {
              return {
              }
          },
  
          methods: {
              performLogout: event =&gt; {
                  console.log(`Endpoint: ${this.endpoint}`); // &lt;-- undefined
                  // this.$http.post(this.endpoint);
              }
          }
      }
  &lt;/script&gt;
  
  
  &lt;style&gt;
      .logout-link {
          padding: 3px 20px;
          cursor: pointer;
      }
  &lt;/style&gt;
  </code></pre>