VueJs + Laravel - компонент кнопки типа "лайк"

Я пытаюсь получить хорошее представление о VueJS, и я использую его с Laravel 5.7 для личного проекта, но я не могу точно понять, как выполнить, вероятно, простую задачу: кнопка \ значок «Нравится» .

Итак, вот ситуация: у меня есть страница, отображающая различные сообщения из моей базы данных, и в нижней части каждого сообщения я хочу кнопку «Мне нравится», которую я сделал со значком, за которым следует количество лайков в этом сообщении; Сначала кнопка будет содержать данные, полученные из соответствующей таблицы базы данных, но если вы нажмете, она увеличит отображаемое число на единицу и вставит новый лайк в базу данных.

Я сделал иконку "лайк" как компонент:

<section class = "bottomInfo">
 <p>
 <likes now = "{{ $article->likes }}"></likes> 
 <span class = "spacer"></span>
 <span class = "entypo-chat"> 
  {{ $article->comments }}
 </p>
</section> <!-- end .bottomInfo -->

Как вы можете видеть, есть <likes>, в котором я добавил опору now, исходя из того, что я до сих пор понимаю в отношении компонентов, таким образом я могу вставить данные из моей базы данных в качестве начального значения (now содержит значение строки базы данных), Проблема в том, что я не знаю, где \ как сохранить это значение в моем приложении, в котором я также буду использовать аксиомы для увеличения лайков.

Вот компонент:

<template>    
    <span class = "entypo-heart"> {{ now }}</span>    
</template>

<script>
    export default {
        props: ['now'],
        data() {
            return {
                like: this.now
            }
        },
        mounted() {
            console.info('Component mounted.');
        }    
    }
</script>

Что я пытался сделать (и я не знаю, правильно ли это), так это передать значение now функции data внутри свойства с именем like, поэтому, если я правильно понял, эта переменная like теперь является частью моих свойств в мой основной экземпляр Vue, вот этот

const app = new Vue({
    el: '#main',
    mounted () {
        console.info("The value of 'like' property is " + this.like)

    },
    methods: {
        toggleLike: function() {

        } //end toggleLike
    }
});

Функция mounted должна распечатать это значение свойства, но вместо этого я получаю

The value of 'like' property is undefined

Почему? Как это работает? Как я могу сделать так, чтобы я мог получить это значение, а также обновить его, если щелкнуть, чтобы затем выполнить запрос к моему API? (Я имею в виду, я не спрашиваю, как выполнять эти отдельные задачи, а просто где \ как это реализовать в этой ситуации). Правильно ли я понимаю логику компонента?