title: Add search and sort functionality to VuetifyJS list with VueJS 2
body: <p>I need to add a simple search and sort functionality to a <a href="https://vuetifyjs.com/en/components/lists#example-title-subtitle-actions-and-action-text" rel="nofollow noreferrer">VuetifyJS list</a>. 
  Here is a CodePen example of the list: <a href="https://codepen.io/anon/pen/bxGGgv" rel="nofollow noreferrer">https://codepen.io/anon/pen/bxGGgv</a></p>
  
  <p>What is the standard way to do this in VueJS 2?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;v-list two-line&gt;
    &lt;template v-for="(item, index) in items"&gt;
        &lt;v-list-tile
          :key="item.title"
          avatar
          ripple
          @click="toggle(index)"
        &gt;
          &lt;v-list-tile-content&gt;
             &lt;v-list-tile-title&gt;{{ item.title }}&lt;/v-list-tile-title&gt;
             &lt;v-list-tile-sub-title class="text--primary"&gt;
                 {{ item.headline }}
             &lt;/v-list-tile-sub-title&gt;
             &lt;v-list-tile-sub-title&gt;{{ item.subtitle }}&lt;/v-list-tile-sub-title&gt;
          &lt;/v-list-tile-content&gt;
        &lt;/v-list-tile&gt;
        &lt;v-divider
          v-if="index + 1 &lt; items.length"
          :key="index"
        &gt;&lt;/v-divider&gt;
    &lt;/template&gt;
  &lt;/v-list&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  export default {
      data () {
        return {
          selected: [2],
          items: [
            {
              action: '15 min',
              headline: 'Brunch this weekend?',
              title: 'Ali Connors',
              subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
            },
            {
              action: '18hr',
              headline: 'Recipe to try',
              title: 'Britta Holt',
              subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
            }
          ]
        }
      },
    }
  </code></pre>