title: How to update DOM when changes occurs within an object rendered by v-for?
body: <p>I am using <code>v-for</code> to render a list based on an array of objects.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li v-for="category, i in categories"
    :class="{active: category.active}"
    @click="changeCategory(i)"&gt;
      &lt;a&gt;{{ category.service_type_name }}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When you click the list item <code>changeCategory(index)</code> runs: </p>
  
  <pre class="lang-js prettyprint-override"><code>changeCategory(index) {
      this.categories.forEach((c, i) =&gt; {
          c.active = (i != index)? false : true
      })
  }
  </code></pre>
  
  <p>So the clicked-on list items <code>active</code> attribute gets set to <code>true</code> and all others set to <code>false</code>, and the list item gets an <code>.active</code> class added to it (because of the <code>:class="{active: category.active}"</code> line in the template.</p>
  
  <p>However, the DOM is not updated to show this change.</p>
  
  <p>Is there anyway to update the DOM automatically when this change occurs, without using <code>this.$forceUpdate()</code> in the <code>changeCategory(index)</code> function?</p>
  
  <p>edit: changed <code>map</code> to <code>forEach</code>, DOM still does not update.</p>
  
  <p>edit: I am using vue-class-components with typescript</p>
  
  <pre class="lang-ts prettyprint-override"><code>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) =&gt; {
              this.categories = res.categories
              this.categories.forEach((c, i) =&gt; {
                  // 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) =&gt; {
              c.active = (i != index)? false : true
          })
      }
  }
  </code></pre>