title: Laravel 7 Vue getting favorite button
body: <p>is there something wrong with this part? getting this on console</p>
  <blockquote>
  <p>app.js:38308 [Vue warn]: Unknown custom element:  - did you
  register the component correctly? For recursive components, make sure
  to provide the &quot;name&quot; option.</p>
  <p>(found in )</p>
  </blockquote>
  <p>here is the code</p>
  <pre><code>&lt;template&gt;
      &lt;span&gt;
          &lt;a href=&quot;#&quot; v-if=&quot;isFavorited&quot; @click.prevent=&quot;unFavorite(post)&quot;&gt;
              &lt;i  class=&quot;fa fa-heart&quot;&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a href=&quot;#&quot; v-else @click.prevent=&quot;favorite(post)&quot;&gt;
              &lt;i  class=&quot;fa fa-heart-o&quot;&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['post', 'favorited'],
  
          data: function() {
              return {
                  isFavorited: '',
              }
          },
  
          mounted() {
              this.isFavorited = this.isFavorite ? true : false;
          },
  
          computed: {
              isFavorite() {
                  return this.favorited;
              },
          },
  
          methods: {
              favorite(post) {
                  axios.post('/favorite/'+post)
                      .then(response =&gt; this.isFavorited = true)
                      .catch(response =&gt; console.log(response.data));
              },
  
              unFavorite(post) {
                  axios.post('/unfavorite/'+post)
                      .then(response =&gt; this.isFavorited = false)
                      .catch(response =&gt; console.log(response.data));
              }
          }
      }
  &lt;/script&gt;
  </code></pre>