title: VueJs: Using component inside another component
body: <p>I'm trying to make use of the main component inside another with pre-defined properties.</p>
  
  <p>Here's what I'm trying to achieve, but I'm just getting an empty div as a result.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;call-dialog-link
          :id="id"
          :url=url"
          message="Are you sure you wish to remove this record?"
          label="Remove"
          css-classes="alert"
      &gt;&lt;/call-dialog-link&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import CallDialogLink from './CallDialogLink.vue';
      export default {
          props: {
              id: {
                  type: String,
                  required: true
              },
              url: {
                  type: String,
                  required: true
              }
          },
          components: {
              'call-dialog-link': CallDialogLink
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the <code>CallDialogLink</code> component</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;span class="clickAble" :class="cssClasses" v-text="label" @click="clicked()"&gt;&lt;/span&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          props: {
              id: {
                  type: String,
                  required: true
              },
              url: {
                  type: String,
                  required: true
              },
              message: {
                  type: String,
                  required: true
              },
              label: {
                  type: String,
                  required: true
              },
              cssClasses: {
                  type: String,
                  required: false
              }
          },
          mounted() {
              window.EventHandler.listen('remove-dialog-' + this.id + '-called', (data) =&gt; {
                  window.location.reload(true);
              });
          },
          methods: {
              clicked() {
                  window.EventHandler.fire('top-confirm', {
                      id: 'remove-dialog-' + this.id,
                      message: this.message,
                      url: this.url
                  });
              }
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>Any idea what I'm doing wrong?</p>