title: vue 2 props undefined
body: <p>Please help! I have 'undefined' props in child template.</p>
  
  <p>Main js:</p>
  
  <pre><code>// some code before
  window.Vue = require('vue');
  import EventBus from '../components/event-bus';
  // some code after
  
  Vue.component('calendar-select', require('../components/admin/calendar_select.vue'));
  
  const app = new Vue({
      el: '#app',
      data: function() {
          return {
              isActiveCalendar: true
          }
      },
      methods: {
          toggleCalendar() {
              this.isActiveCalendar = !this.isActiveCalendar;
          }
      },
      mounted() {
          EventBus.$on('toggleCalendar', this.toggleCalendar);
      }
  });
  </code></pre>
  
  <p>After this I created template like this:</p>
  
  <pre><code>&lt;template&gt;
          &lt;div class="custom-select" v-bind:class="{ active: isActiveCalendar}" &gt;
              &lt;div class="box flex" v-on:click="toggleCalendar" &gt;
                  &lt;span&gt;Calendar&lt;/span&gt;
                  &lt;img src="/assets/img/admin/arrow-down.png" alt="#"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import EventBus from '../event-bus';
  export default 
  {
  // ------- start
      props: ['isActiveCalendar'],
      data: function() {
          return {
          }
      },
      methods: {
          toggleCalendar: function(event) {
              console.log(this.isActiveCalendar)
              EventBus.$emit('toggleCalendar');
          }
      }
  // ------- end
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I do <strong>console.log</strong> on <strong>this.isActiveCalendar</strong>, the variable is undefined and in Vue plugin for Chrome is same thing.</p>
  
  <p>Please, tell me, what mistake I am doing!</p>
  
  <p>Thanks!</p>