Давайте разберемся по-порядку:
1. При клике вызывается favorite(x)
2. favorite диспатчит USERLEVELS_PATCH
3. USERLEVELS_PATCH отправляет запрос на сервер, логирует результат, но ничего не коммитит
Из пункта 3 видим, что стор не мутируется - это 1 проблема
Дальше, какой смысл в геттерах, которые просто оборачивают стейт?
const getters = {
levels: state => state.levels,
userlevels: state => state.userlevels
}
Вернемся в компонент, и видим computed newlevels с побочными эффектами... Вы мутируете стейт вне мутации, а вообще в computed (который по факту тот же геттер) не должен мутировать ничего, он должен лишь вычислять значение, которое вернет, например можно сделать так:
newlevels: function () {
return this.levels.map(level => {
return this.userlevels.reduce((acc, userlevel) => {
// если честно, меня еще дико смущает, что происходит тут... но автору виднее
if (level.id === userlevel.level) {
acc['favorite'] = userlevel.favorite
acc['complete'] = userlevel.complete
acc['progress'] = userlevel.progress
acc['userlevel_id'] = userlevel.id
} else {
acc['favorite'] = acc.favorite || false
acc['complete'] = userlevel.complete
acc['progress'] = userlevel.progress || 0;
}
return acc;
}, {...level});
});
}