main.js

var bearsApi = Vue.resource('/blog/bears/');

Vue.component('input-form', {
    props: ['bears'],
    data: function() {
        return {
            title: '',
            id:''
        }
    },

    template:
    `<div>
       <hr>
        <input type="text" placeholder="Blog name" v-model="title"/>
        <input type="button" value="Save" @click="save"/>
     </div> `,
    methods:{
        save() {
            var bear = {
                title: this.title,
            };

            bearsApi.save({}, bear).then(result=>
            result.json().then(data => {
                this.bears.push(data);
            }))
        }
    }
});

Vue.component('bear-list', {
    props: ['bears'],
    template:
        `<div>
            <input-form></input-form>
            <ul>
                <li v-for="bear in bears">
                <span v-bind:title="bear.body">{{ bear.title}} </span>
                </li>
            </ul>
        </div>`,
created: function () {
        bearsApi.get().then(result =>
            result.json().then(data =>
                data.forEach(bear => this.bears.push(bear))
                )
            )
        }
    }
);


new Vue({
    el:"#app",
    template: '<bear-list :bears="bears" />',
    data: {
        bears: [
        ]
    }
})