Vue.js与PHP

Question

I have been using only JQuery in my app in order to make the Frontend a bit more interactive. Server-side, I am using PHP.

I've read about Vue.js lately, and am really interested by its reactive components, but I think I am missing some points in order to make a transition towards it.

I have a blog module that allows posts and comments. Since data of posts and comments are quite similar, I am using a PHP function to format them, using the instance of my Entity to separate some chunks of code. Looks like this :

function formatPost(Entity $post) {
    $html .= '<div class="post" data-item="'.$post->id().'">
                 <div class="toolbar">Edit / Delete / Report</div>
                 <div class="user">'.$post->user()->nickname().'</div>
                 <div class="date">'.$post->date().'</div>
                 <div class="content">'.$post->message().'</div>';

    if ($post instanceof BlogPost) {
        $html .= '<div class="favorite">Set as fav</div>'; // for example
    }
    elseif ($post instanceof Comment) {
        $html .= '<div class="upvote">Upvote</div>
                  <div class="downvote">Downvote</div>'; 
    }

    $html .= '</div>';

    return $html
}

What I want to do with Vue.js is to create a BlogPost component that contains all data and features you saw in the PHP function above.

So, I thought of rewriting the PHP function to JS at first, like this :

Vue.component('blogPost', {
  props: ['item', 'date', 'message', 'user', 'isComment'],
  template: '<div class="post">\
                 <div class="toolbar" v-on:click="doSomething">Edit / Delete / Report</div>\
                 <div class="user">{{ user }}</div>\
                 <div class="date">{{ date }}</div>\
                 <div class="content">{{ message }}</div>\

                 <template v-if="isComment">\
                    <div class="favorite"></div>\
                 </template>\
                 <template v-else>\
                    <div class="upvote"></div>\
                    <div class="downvote"></div>\
                 </template>\
             </div>';
});

<?php foreach ($blogPosts as $post) { ?>
  <blogPost item="<?= $post->id() ?>"
            date="<?= $post->date() ?>" 
            message="<?= $post->message() ?>"
            user="<?= $post->user()->nickname() ?>"
            isComment="<?= $post instanceof Comment ?>"
  >
  </blogPost>
<?php } ?>

This way it would be easy to apply the features I want, as such as the edit function that would only replace the message with some ajax, or the vote feature that would update the number of votes and such.

My problem is that my PHP function is actually way longer and complicated than what's shown here and it will be quite redundant to pass all the props to create the custom component since I don't know how to pass a PHP object to JS.

  <blogPost item="..."
            date="..." 
            message="..."
            user="..."
            profilePicture="..."
            votesNumber="..."
            favoritesNumber="..."
            repliesNumber="..."
            isComment="..."
            ...
  >
  </blogPost>

I then thought that I could use some parents and children components so it would separate my code in small pieces :

Vue.component('blogPost', {
  props: ['item'],
  template: '...'
});

Vue.component('edit', {
  template: '...'
});

Vue.component('delete', {
  template: '...'
});

<blogPost item="<?= $post->id() ?>">
  <edit></edit>
  <delete></delete>
  <!-- etc... -->
</blogPost>

But I need the blogPost's item prop to work with my edit and delete features, and I don't know how to pass it to the children.

I'm really confused with how to work Vue.js and PHP, could you guys please help me with that?