Как обновить DOM, когда в объекте, отображаемом v-for, происходят изменения?

Я использую v-for для отображения списка на основе массива объектов.

<ul>
  <li v-for="category, i in categories"
  :class="{active: category.active}"
  @click="changeCategory(i)">
    <a>{{ category.service_type_name }}</a>
  </li>
</ul>

При щелчке по элементу списка changeCategory(index) запускается:

changeCategory(index) {
    this.categories.forEach((c, i) => {
        c.active = (i != index)? false : true
    })
}

Таким образом, атрибут active элементов списка, по которым щелкнули клики, получает значение true, а все остальные - false, а элемент списка получает добавленный к нему класс .active (из-за строки :class="{active: category.active}" в шаблоне.

Однако модель DOM не обновляется, чтобы отображать это изменение.

Есть ли способ автоматически обновлять DOM, когда происходит это изменение, без использования this.$forceUpdate() в функции changeCategory(index)?

edit: изменено map на forEach, DOM по-прежнему не обновляется.

изменить: я использую компоненты vue-class с машинописным текстом

import Vue from 'app/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './services.vue'

@Component({
    mixins: [Template]
})
export default class Services extends Vue {
    categories = []

    created() {
        this.api.getServiceSetupCatagories().then((res) => {
            this.categories = res.categories
            this.categories.forEach((c, i) => {
                // adding active property to the object
                // active = true if i = 0, false otherwise
                c.active = (i)? false : true
            })
        })
    }

    changeCategory(index) {
        this.categories.forEach((c, i) => {
            c.active = (i != index)? false : true
        })
    }
}