main.js

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

function findIndex(id, bears) {
    let i = 0;
    bears.forEach(function (element) {
        if (element.id === id) {
            console.log(i);
           return i;
        }
        i++;
    })
    return -1;
}

Vue.component('input-form', {
    props: ['bears','bearAttr'],
    data: function() {
        return {
            title: '',
            body: '',
            id:''
        }
    },
    watch: {
        bearAttr: function (newVal) {
            this.title = newVal.title;
            this.body = newVal.body;
            this.id = newVal.id
        }
    },
    template:
    `<div>
       <hr>
        <input type="text" placeholder="Blog name" v-model="title"/>
        <input type="text" placeholder="Blog body" v-model="body">
        <input type="button" value="Save" @click="save"/>
     </div> `,
    methods: {
        save() {
            var bear = {
                title: this.title,
                body: this.body,
                id: this.id
            };
            if (this.id) {
                bearsApi.update(bear).then(result =>
                    result.json().then(data => {
                        var index = this.id;
                        this.bears.splice(findIndex(this.id, this.bears),1,data);
                        this.title = '';
                        this.body = '';
                        this.id = '';
                    }))
            } else {
                bearsApi.save({}, bear).then(result =>
                    result.json().then(data => {
                        this.bears.push(bear);
                        this.title = '';
                        this.body = '';
                    }))
                }
            }
        }
    });

Vue.component('bear-list', {
        props: ['bears','bearsApi'],
        data: function () {
            return {
                bear: null
            }
        },
        template:
            `<div>
            <input-form :bears="bears" :bear-attr="bear"/>
            <div class="row">
                <div class="col-3" v-for="bear in bears" :key="bear.id">
                    <div class="card" style="width: 18rem">
                   
                        <div class="card-body">
                            <h5 class="card-title">{{ bear.title }}</h5>
                            <p class="card-text">{{ bear.body }}</p>
                            <span>{{ bear. id }}</span>
                            <button type="button" class="btn btn-primary" @click="edit(bear)">Изменить</button>
                            <button type="button" class="btn btn-danger" onclick="delete(bear)">Удалить</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>`,
        methods: {
            edit: function (bear) {
                this.bear = bear;
            },
            delete: function (bear) {
                bearsApi.remove(bear).then(result => {
                    this.bears.splice(this.bears.indexOf(this.bear), 1)

                })
            }
        },
        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: [
        ],
        bear: []
    }
})