Get component to re-render

I'm stuck at a crossroads with a component I am working on.

I have the following component "RecentUpdates"

Within it I am passing props down to a few other components, as you can see from the top of the file.

My problem is when adding a new post, I can not figure out how to get the correct update object array back and i also can not figure out the correct 'Vue way' to update the data prop that is being passed down to the "PostList" component.

<PostList v-if="recent_posts[0]" :categories="categories" :posts="recent_posts[0]" :user="user"/>

<Pagination v-on:getPreviousPage="getPreviousPage" v-on:getNextPage="getNextPage"/>

import PostList from './PostList'; import PostFilter from './PostFilter'; import Pagination from './Pagination'; import EventBus from '../event-bus';

export default {

name: 'RecentUpdates',

data: () => ({ errors: [], recent_posts: [], }),

props: ['categories', 'user'],

components: { PostList, PostFilter, Pagination },

created() {

if (this.user.meta.selected_categories[0] == 0) {
  this.showAllPosts();
}

// do not call here, not working as expected
// is switching selected category to an incorrect one
// this.updateList();

this.getSelectedCategory();

},

watch: { recent_posts: function(newValue) {

  EventBus.$on('addPost', function(newPost) {
    console.log(newPost);

    this.$forceUpdate();


    //this.recent_posts.push(newPost);

    //this.$set(this.recent_posts, newPost, newPost);

    // this.$nextTick(function () {
    //   this.recent_posts.push(newPost);
    // });


  });

    console.log(this.recent_posts[0]);


  // this.$nextTick(function () {
  //   console.log(this.recent_posts[0]) // => 'updated'
  // });
  
  // if (this.user.meta.selected_categories[0] == 0) {
  //   EventBus.$on('addPost', this.showAllPosts);
  // } else {
  //   EventBus.$on('addPost', this.getSelectedCategory);
  // }
  //this.updateList();
}

},

methods: {

// updateList() {

//   if (this.user.meta.selected_categories[0] == 0) {
//     EventBus.$on('addPost', this.showAllPosts);
//     //EventBus.$emit('newPost');

//   } else {
//     EventBus.$on('addPost', this.getSelectedCategory);
//     //EventBus.$emit('newPost');
//   }
  
// },

getSelectedCategory() {

  let categoryId = this.user.meta.selected_categories[0];

  this.getSelectedPosts(categoryId);
},

showAllPosts() {

  axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]', 
    {headers: {'X-WP-Nonce': portal.nonce}})
  .then(response => {
    this.recent_posts = [];
    //this.recent_posts = response.data;
    //console.log(response.data);
    this.recent_posts.push(response.data);
    console.log(this.recent_posts[0]);

  })
  .catch(e => {
    this.errors.push(e);
  });
},

getSelectedPosts(categoryId) {

  axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&categories=' + categoryId,
    {headers: {'X-WP-Nonce': portal.nonce}})
  .then(response => {
    this.recent_posts = [];
    //console.log(response.data);

    this.recent_posts.push(response.data);

    console.log(this.recent_posts[0]);


  })
  .catch(e => {
    this.errors.push(e);
  });
},

/**
 * Pagination methods
 *
 */
getPreviousPage(page) {
  axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&page=' + page, 
    {headers: {'X-WP-Nonce': portal.nonce}})
  .then(response => {
    this.recent_posts = response.data;
  })
  .catch(e => {
    this.errors.push(e);
  });
},

getNextPage(page) {
  axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&page=' + page, 
    {headers: {'X-WP-Nonce': portal.nonce}})
  .then(response => {
    this.recent_posts = response.data;
  })
  .catch(e => {
    this.errors.push(e);
  });
}

}, }