Ревью назначения роли пользователю Vue 2

Условие

Ревью назначения роли пользователю Vue 2

export default {
  data() {
    return { user: { name: 'Ivan' } };
  },

  methods: {
    setRole(role) {
      this.user.role = role;
    }
  }
}

Ответ

Во Vue 2 добавление ранее не объявленного user.role таким присваиванием не становится реактивным. Объявите поле заранее или используйте $set.

Исправление метода: this.$set(this.user, 'role', role). Альтернатива — начальное user: {name:'Ivan', role:null} либо замена объекта на новый с role. Само изменение клиентского поля не выдаёт настоящие права: назначение роли требует серверной проверки.