title: Use drop down select option to sort list by date
body: <p>I am new to Vue.js and trying to add it to my project incrementally as an add-on, mostly for data binding. Thus, I am calling the Vue.js script in my footer and using a main.js file to contain my Vue scripts. </p>
  
  <p>I am trying to sort a data list by date using a drop down select option that gives date ranges. So far I have not been able to find any tutorials online that can get me to my goal. Can anyone lead me in the right direction? </p>
  
  <pre><code>&lt;div id="date-range"&gt;
      &lt;h3&gt;Activity Overview&lt;/h3&gt;
      &lt;select id="selected" class="activity-overview__select" v-model="selected"&gt;
          &lt;option value="24hr"&gt;Past 24 Hours&lt;/option&gt;
          &lt;option value="7days"&gt;Past 7 Days&lt;/option&gt;
          &lt;option value="14days"&gt;Past 14 Days&lt;/option&gt;
      &lt;/select&gt;
      &lt;ul&gt;
          &lt;li&gt;{{ selected.id }}{{ selected.text }}{{ selected.date }}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  var incidentCount = new Vue({
      el: '#incidentCountID',
      data: {
          incidentList: [
          { id: 0, text: 'Run', date: '2018-07-11' },
          { id: 1, text: 'Jump', date: '2018-07-10' },
          { id: 2, text: 'Skip', date: '2018-07-06' },
          { id: 3, text: 'Dance', date: '2018-07-05' },
          { id: 4, text: 'Swing', date: '2018-07-01' },
          { id: 5, text: 'Hop', date: '2018-05-29' },
          { id: 6, text: 'Bounce', date: '2018-06-29' },
          { id: 7, text: 'Crawl', date: '2018-06-27' },
          { id: 8, text: 'Walk', date: '2018-06-26' },
          { id: 9, text: 'Spin', date: '2018-06-25' },
          { id: 10, text: 'Skate', date: '2018-06-07' },
          { id: 11, text: 'Hike', date: '2018-06-05' }
        ]
      },
      methods: {
          ???
      }
  });
  </code></pre>
  
  <p>Thank you!</p>