title: VueJS computed property does not update
body: <p>I have a computed property:</p>
  
  <pre><code>outputData() {
          if(this.yearSelected) {
              let res = this.taikoData
                          .map(item =&gt; {
                              return {
                                  showName: item.showName,
                                  IdMitgliedschaftenPersonen: item.IdMitgliedschaftenPersonen,
                                  PaidProp: item.paidDate
                                                      .filter(item =&gt; item.paidDate.substr(0,4)==this.yearSelected)
                                                      .sort((a,b) =&gt; (a.paidDate&gt;b.paidDate) ? 1 :( (b.paidDate&gt;a.paidDate) ? -1 : 0 )),
                               }   
                          })
          return res
          } 
          else {
              return []
          }
  }
  </code></pre>
  
  <p>It receives data from the taikoData object (populated during mounting) and filters it to match the current year. Then I can add a month for which a member is absent and does not have to pay the monthly subscription fee.</p>
  
  <p><a href="https://i.stack.imgur.com/rKsyt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rKsyt.png" alt="screenshot of user interface"></a></p>
  
  <p>The screenshot shows the user interface. When clicking the button, I add the month and through an event update the taikoData-object. The data is also being saved in a database. I would like to see the updated data immediately inside the data table. However, it doesn't update. Only when changing the yearSelected-filter back and forth the updated data will show (or of course when refreshing the page).</p>
  
  <p>What I have tried so far:</p>
  
  <p>1) this.$forceUpdate() inside a function of the method-prop when receiving the $emit-data. It didn't work</p>
  
  <p>2) extend the condition with a counter-variable which initially equals 0: if(this.yearSelected || counter > 0). The counter will increase each time when emitting the data back to the parent. </p>
  
  <p>The data table is a vuetify datatable:</p>
  
  <pre><code>&lt;v-data-table
                      :items="outputData"
                      :headers="headers"
                      :search="search"
                      sort-by="showName"
                       :footer-props="{
                          'items-per-page-options': [20,50,75,-1],
                       }"
                  &gt;
  </code></pre>
  
  <p>The taikoData is initially retrieved here: </p>
  
  <pre><code>async mounted()
      {
          let res = await api.get("https://requestURL")
          res = res.data.records
          this.taikoData = res
  }
  </code></pre>