[Vue warn]: Error in render: "TypeError: Cannot read property ‘wp:featuredmedia’ of undefined – REST API

I’m using this code to learn vuejs and to make a portfolio infinite scroll using the WordPress REST API. I’m able to render the first ten post but on scroll vue will stop working and give me this error that is related to the featured images url provided by the api:

[Vue warn]: Error in render: “TypeError: Cannot read property ‘wp:featuredmedia’ of undefined”
(found in Root)

The code line that reference the error is this self.posts.push(data);

TypeError: Cannot read property ‘wp:featuredmedia’ of undefined

And this line for this other error:

$.getJSON( 'wp-json/wp/v2/posts?categories=3&page='+page+'&per_page=10&_embed', function(data){}

Here is the code:

<?php get_header(); ?>

<div class="container" id="app">
  <div class="row" style="padding:2em;margin:2em 0 0 0;" v-on:scroll="loadItems()">
    <div class="card-columns">
      <div class="card" v-for="post in posts">
        <img class="card-img-top" v-bind:src="post._embedded['wp:featuredmedia'][0].source_url" />
        <h4 class="" v-html="post.title.rendered"></h4>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
(function($){
  $(document).ready(function(){

  var page = 1;
  var canBeLoaded = true;
  var app = new Vue({
    el: '#app',
    data: {
      posts: []
    },
    created: function() {
      window.addEventListener('scroll',this.loadItems);
    },
    destroyed: function() {
      window.removeEventListener('scroll', this.loadItems);
    },
    mounted: function(){
      console.log('mounted fired');
      var self = this;
      $.getJSON( 'wp-json/wp/v2/posts?categories=3&page=1&per_page=10&_embed', function(data){
        console.log(data);
        self.posts = data;
      });
    },
    methods: {
      loadItems: function(){
        var bottomOffset = 2000;
        var self = this;
          if( $(document).scrollTop() >= ( $(document).height() - $(window).height() - 10 ) && canBeLoaded == true ){
            console.log('loadItems method fired');
            console.log(page);
            canBeLoaded = false;
            $.getJSON( 'wp-json/wp/v2/posts?categories=3&page='+page+'&per_page=10&_embed', function(data){
              if( data.length > 0 ){
                self.posts.push(data);
                page++;
              }
            }).done(function(){
              canBeLoaded = true;
            });
          }
      }, // end loadItems
    } // end methods
  });

  // for debug and prototype only - remove in production

  // var root = $('html, body');
  //   $('#scroll-link').on('click', function(e){
  //     e.preventDefault();
  //       root.animate({
  //           scrollTop: $( $.attr(this, 'href') ).offset().top
  //       }, 500);
  //       return false;
  //   });
  //

  }); // doc ready
}(jQuery));
</script>

I’m sure that the images is returned but why I get this error?