VueJS2: Update data pattern?

So, in one of my VueJS templates, I have a left sidebar that generates buttons by iterating (v-for) through a multidimensional items array.

When one of these buttons is clicked, a method is run:

this.active.notes = item.notes

active.notes is bound to a textarea in the right content section.

So, every time you click one of the item buttons, you see the (active) notes associated with that item.

I want to be able to have the user edit the active notes in the textarea. I have an AJAX call on textarea blur which updates the db. But the problem is, the items data hasn't changed. So if I click a different item, then click back to the edited item, I see the pre-edited notes. When I refresh the page, of course, everything lines up perfectly.

What is the best way to update the items data, so that it is always consistent with the textarea edits? Should I reload the items data somehow (with another AJAX call to the db)? Or is there a better way to bind the models together?

Here is the JS:

export default {
    mounted () {
        this.loadItems();
    },

    data() {
        return {
            items: [],
            active: {
                notes: ''
            },
        }
    },

    methods: {

        loadItems() {

            axios.get('/api/items/'+this.id)
                    .then(resp => {
                        this.items = resp.data
                    })

        },

        saveNotes () {

           ...api call to save in db...

        },

        updateActive (item) {
            this.active.notes = item.notes;
        },
    }
}