title: Vuejs how to pass data as a prop to a child component
body: <p>I build following component:</p>
  
  <pre><code>var Modal = Vue.component('modal', {
  
      template: `
          &lt;div id="modal" class="modal"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;p&gt;{{ link }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      `,
  
      props: [
          'link'
      ],
  
  });
  </code></pre>
  
  <p>And I would like to change the link data dynamically after I sent successfully an axios post.</p>
  
  <p>My vue instance</p>
  
  <pre><code>new Vue({
  
      el: '#form',
  
      components: {
          'modal': Modal
      },
  
      data: {
          userId: '',
          title: '',
          body: '',
          snippetLink: '',
      },
  
      methods: {
  
          publish (e) {
              var self = this;
              axios.post('/snippets',  {
                  title: this.title,
                  body: this.content,
              })
              .then(function (response) {
                  console.log("success");
                  self.link = response.data.hash; // Here I tried to add the reponse content to the vue component's p
              })
              .catch(function (error) {
                console.log(error);
              })
          },
  </code></pre>
  
  <p>My Html Markup:</p>
  
  <pre><code>        &lt;modal link=""&gt;&lt;/modal&gt;
         ...
          &lt;button type="button"                      
                     v-bind:class="{ 'modal-trigger': !isActiveModal }"
                     @click="publish"&gt;Publish
                     &lt;i class="material-icons right"&gt;send&lt;/i&gt;
          &lt;/button&gt;
  </code></pre>
  
  <p>So I am sending an axios post to my server successfully and get the data, I would like to open a modal window and put the data in a p tag, so far the modal pops up after my post but I am not sure my it does not change the content of the p tag.</p>