title: Vue.js 2 - $forceUpdate() on components doesn't refresh computed properties?
body: <p>I'm not sure if I'm doing this right or wrong, but all the answers I seem to find how to update the dom for computed values...</p>
  
  <p>I have this component:</p>
  
  <pre><code>Vue.component('bpmn-groups', {
      props: ['groups', 'searchQuery'],
      template: '#bpmn-groups',
      computed: {
          filteredGroups: function () {
              var self = this;
              return this.groups.filter(function(group) {
                  self.searchQuery = self.searchQuery || '';
                  return _.includes( group.name.toLowerCase(), self.searchQuery.toLowerCase() );
              });
          }
      },
      methods: {
          clearFilter: function () {
              this.searchQuery = '';
          },
          deleteGroup: function(group) {
              Vue.http.delete('api/groups/'+group.id ).then(response =&gt; { // success callback
                  var index = this.groups.indexOf(group); // remove the deleted group
                  this.groups.splice(index, 1);
                  this.$forceUpdate(); // force update of the filtered list?
                  toastr.success('Schemų grupė &lt;em&gt;'+group.name+'&lt;/em&gt; sėkmingai pašalinta.');
              }, response =&gt; { // error callback
                  processErrors(response);
              });
              this.$forceUpdate();
          },
      },
  });
  </code></pre>
  
  <p>And in the template I just have a simple v-for to go through filteredGroups:</p>
  
  <pre><code>&lt;input v-model="searchQuery" type="text" placeholder="Search..." value=""&gt;
  &lt;div v-for="group in filteredGroups" class="item"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>The deletion works fine, it removes it from groups property, however the filteredGroups value still has the full group, until I actually perform a search or somehow trigger something else...</p>
  
  <p>How can I fix it so that the filteredGroup is updated once the group is updated?</p>