title: Change Computed Property on Click
body: <p>Is it possible to add/change the computed property inside the &quot;v-for&quot; with a click event?
  I would like to be able to display the list of food based on their category when I click on the proper button.</p>
  <p>If I click on the &quot;fruit&quot; button it will be</p>
  <pre class="lang-html prettyprint-override"><code> &lt;div v-for=&quot;food in fruitCategory&quot; :key=&quot;food.name&quot; class=&quot;card&quot;&gt;
        &lt;p&gt;{{ food.name }}&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  <p>and &quot;candy&quot; button it would be</p>
  <pre class="lang-html prettyprint-override"><code> &lt;div v-for=&quot;food in candyCategory&quot; :key=&quot;food.name&quot; class=&quot;card&quot;&gt;
        &lt;p&gt;{{ food.name }}&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Is this a good approach?</p>
  <h2>Actual code below</h2>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;layout&quot;&gt;
      &lt;button&gt;all&lt;/button&gt;
      &lt;button&gt;fruit&lt;/button&gt;
      &lt;button&gt;candy&lt;/button&gt;
      &lt;div v-for=&quot;food in foods&quot; :key=&quot;food.name&quot; class=&quot;card&quot;&gt;
        &lt;p&gt;{{ food.name }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>export default {
    name: 'Food',
    data() {
      return {
        foods: [
          { name: 'banana', category: 'fruit' },
          { name: 'orange', category: 'fruit' },
          { name: 'strawberry', category: 'fruit' },
          { name: 'gum', category: 'candy' },
          { name: 'fuzzy peach', category: 'candy' },
        ]
      }
    },
    computed: {
      fruitCategory: function() {
        return this.foods.filter(function(food) {
          return food.category === 'fruit'
        })
      }
    },
    candyCategory: function() {
      return this.foods.filter(function(food) {
        return food.category === 'candy'
      })
    }
  }
  </code></pre>