title: VueJs + Laravel - like button component
body: <p>I'm trying to get a good understanding of VueJS, and I'm using it with Laravel 5.7 for a personal project, but I can't exactly figure out how to do a, probably, simple task a "like" button\icon.</p>
  
  <p>So, here's the situation, I have a page, displaying various posts from my database, and at the bottom of each post I want a "like toogle" button, which I made with an icon followed by the number of likes on that post; At first the button will contain the data retrieved from the corresponding database table, but if you click it will increase the displayed number by one and insert a new like in the database.</p>
  
  <p>I made the "like" icon as a component :</p>
  
  <pre><code>&lt;section class="bottomInfo"&gt;
   &lt;p&gt;
   &lt;likes now="{{ $article-&gt;likes }}"&gt;&lt;/likes&gt; 
   &lt;span class="spacer"&gt;&lt;/span&gt;
   &lt;span class="entypo-chat"&gt; 
    {{ $article-&gt;comments }}
   &lt;/p&gt;
  &lt;/section&gt; &lt;!-- end .bottomInfo --&gt;
  </code></pre>
  
  <p>As you can see there's a <code>&lt;likes&gt;</code> in which I added a prop <code>now</code>, by what I'm understanding till now about components, in this way I can insert the data from my db as a starting value (<code>now</code> contains the db row value), problem is, I don't know where\how to keep that value in my app, in which I'm gonna also use axios for increasing the likes.</p>
  
  <p>Here's the component:</p>
  
  <pre><code>&lt;template&gt;    
      &lt;span class="entypo-heart"&gt; {{ now }}&lt;/span&gt;    
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['now'],
          data() {
              return {
                  like: this.now
              }
          },
          mounted() {
              console.log('Component mounted.');
          }    
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>What I tried to do (and I don't know if it's correct) is to pass the value of <code>now</code> to the <code>data</code> function inside a property named <code>like</code>, so, if I understood correctly, that variable <code>like</code> is now part of my properties in my main Vue instance, which is this one</p>
  
  <pre><code>const app = new Vue({
      el: '#main',
      mounted () {
          console.log("The value of 'like' property is " + this.like)
  
      },
      methods: {
          toggleLike: function() {
  
          } //end toggleLike
      }
  });
  </code></pre>
  
  <p>The <code>mounted</code> function should print that property value, but instead I get</p>
  
  <pre><code>The value of 'like' property is undefined
  </code></pre>
  
  <p>Why? Is this how it works? How can I make it so I can get that value and also update it if clicked, to then do a request to my API? (I mean, I'm not asking how to do those single tasks, just where\how to implement it in this situation). Am i getting the component logic right?</p>