[Vuejs]-Axios: Previous response data being assigned to variable

The problem can be resolved by adding a watcher to the appointments variable.

All I needed to do was add the following code within watch: { ... }:

appointments: function () {
    // now it works -- even without any function body
}

This seems really odd to me. I should not need to create a watcher for a variable in order to have that variable updated in the function body of another watcher.

I have either missed something in the Vue.js documentation about watchers or this is a bug. If someone can shed some light on this in the comments that would be great!

You need to refresh practitionerId after fetching people from RESTful API.

For example, in treatmentId watch:

axios.get('/api/people?role_ids=' + allowedRoleIds).then(response => {
    this.practitioners = response.data;

    // refresh practitionerId whenever fetch new people
    const selectedPractitionerId = this.practitionerId;
    this.practitionerId = 0;
    // if selected practitioner exists in new people
    practitioners.forEach(p => {
        if (p.id == selectedPractitionerId) {
            this.practitionerId = p.id;
        }
    }) // you can omit this search if you force the user to select new practitioner whenever they change treatment
});