How to trigger transition when data is loaded in component in vue.js?

i'm currently working on a project with vue.js and vue-router. I got a vue in which I display some news, and I got thoses news from an API (it's kind of a blog).

I'm currently loading thoses news inside the router.data to set the data for the component, as said here. It's working great, no problems.

But my problem is that I want to animate the apparition of the news when I go to this view. I've tried using the ready property from the component, but it's called before the router.data has finished getting the news, which result in errors in animation, because there aren't any elements.

How can i trigger the animations once the news I fetch are fully rendered inside the DOM ?

Here is the code of my component:

export default {
  name: 'News',
  data: function () {
    return {
      news: []
    }
  },
  route: {
    data: function (transition) {
      console.log('data hook')
      return api
      .getPostsByLimit(4, 1)
      .then(function (posts) {
        for (var i = 0; i < posts.length; i++) {
          var post = posts[i]
          post.formatedDate = moment(post.date).format("D MMM. YYYY")
          post.dateTime = moment(post.date).format("YYYY-MM-DD")
          if(post.news_artist_related) {
            post.news_artist_related = JSON.parse(post.news_artist_related)
            post.news_artist_related.type = slugify(post.news_artist_related.type)
            post.news_artist_related.slug = slugify(post.news_artist_related.slug)
          }
        }
        return posts
      })
      .then(news => ({news}))
    }
  },
  ready: function () {
    console.log('Ready hook')
    animateNewsApparition()
  }
}