Edit in JSFiddle

console.log(Vue.version);
var butter = Butter('1b13611e144e11bbce5b484f4064e39638b223a1');

var BlogHome = Vue.component('blog-home', {
  template: '#blog-home-template',
  props: {
    data: Array,
  },
  data: function () {
    return {
      page_title: 'Blog',
      posts: []
    }
  },
  methods: {
    getPosts() {
      butter.post.list({
        page: 1,
        page_size: 10
      }).then((res) => {
        this.posts = res.data.data
      })
    }
  },
  created() {
    this.getPosts()
  }
})

var vueApp = new Vue({
  el: '#vue-app',
  components: {BlogHome: BlogHome},
  data: {
    blogPosts: []
  }
})

<div id="vue-app">
  <blog-home :posts="blogPosts"/>
</div>
<script type="text/x-template" id="blog-home-template">
    <div id="blog-home">
        <h1>{{ page_title }}</h1>
        <!-- Create `v-for` and apply a `key` for Vue. Here we are using a combination of the slug and index. -->
        <div v-for="(post,index) in posts" :key="post.slug + '_' + index">
            <article class="media">
                <figure>
                  <!-- Bind results using a `:` -->
                  <!-- Use a `v-if`/`else` if their is a `featured_image` -->
                  <img v-if="post.featured_image" :src="post.featured_image" alt="">
                  <img v-else src="http://via.placeholder.com/250x250" alt="">
                </figure>
                <h2>{{ post.title }}</h2>
                <p>{{ post.summary }}</p>
            </article>
        </div>
    </div>
</script>

#blog-home article{
    width: 50%;
    float: left;
}
#blog-home article figure img{
    height: 50px;
    margin: 0px auto;
}