title: call a component from another component in vue.js
body: <p>I have an alert component like in this video: <a href="https://laracasts.com/series/learning-vue-step-by-step/episodes/21" rel="nofollow">https://laracasts.com/series/learning-vue-step-by-step/episodes/21</a> And I have another component (Book). When a book was created how can I call Alert component in the success callback function like this:</p>
  
  <pre><code>&lt;alert&gt;A book was created successfully !!!&lt;/alert&gt;
  </code></pre>
  
  <p>I am a newbie in using vue.js. Thank you for your help.</p>
  
  <p><strong>Updated:</strong> This is my code</p>
  
  <pre><code>submit: function () {
      this.$http.post('/api/books/add', {
          data: this.data,
      }).then(function (response) {
          // I want to use Alert component right here to notice to users.
      }, function (response) {
      });
  }
  </code></pre>
  
  <p><strong>Update 2:</strong>
  Alert Component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="Alert Alert--{{ type | capitalize }}"
           v-show="show"
           transition="fade"
      &gt;
          &lt;slot&gt;&lt;/slot&gt;
  
          &lt;span class="Alert__close"
                v-show="important"
                @click="show = false"
          &gt;
              x
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
          props: {
              type: { default: 'info' },
              timeout: { default: 3000 },
              important: {
                  type: Boolean,
                  default: false
              }
          },
  
          data() {
              return {show: true};
          },
  
          ready() {
              if (!this.important)
              {
                  setTimeout(
                      () =&gt; this.show = false,
                          this.timeout
                      )
              }
  
          }
      }
  
  &lt;/script&gt;
  
  &lt;style&gt;
      .Alert {
          padding: 10px;
          position: relative;
      }
  
      .Alert__close {
          position: absolute;
          top: 10px;
          right: 10px;
          cursor: pointer;
      }
  
      .Alert--Info {
          background: #e3e3e3;
      }
  
      .fade-transition {
          transition: opacity 1s ease;
      }
  
      .fade-leave {
          opacity: 0;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>And in Book.vue I want to do like this:</p>
  
  <pre><code>// resources/assets/js/components/Book.vue
  &lt;template&gt;
      .....
      &lt;alert&gt;A book was created successfully !!!&lt;/alert&gt;
  
      //Create book form
      ....
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          methods: {
              submit: function () {
                      this.$http.post('/api/books/add', {
                      data: this.data,
                  }).then(function (response) {
                       this.$refs.alert
                  }, function (response) {
                  });
      }
  &lt;/script&gt;
  </code></pre>