title: How to create Date(now) within Vue.js to use in a computed property?
body: <p>I have an array of calendar events with a pre-formatted date: <strong>20190517T010000Z</strong>.  </p>
  
  <p>I need to filter the array based upon the following:</p>
  
  <p>1) Future Events (any events occurring greater than <code>NOW</code>)</p>
  
  <p>2) Past Events (any events that occurred less than <code>NOW</code>)</p>
  
  <p>3) New Events created within the past 7 days (<code>NOW</code> - 7 days)</p>
  
  <p>I have an example hardcoded below - but need <code>NOW</code> to be dynamic and based upon the user's system time.  I can't figure out how to get <code>NOW</code> in the same format as the datetime format I'm getting in the my array.  Also, I don't know where in my code it should reside (within a separate JS file or within the Vue component)?</p>
  
  <p>Once I have it working within the component listed below, it will be moved to a VUEX Getter.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="text-left m-4 p-4"&gt;
          &lt;div&gt;
              Total Number Events: {{ allEvents.length }}
          &lt;/div&gt;
          &lt;div&gt;
              Events Created In Last 7 Days: {{ createdEvents }}
          &lt;/div&gt;
          &lt;div&gt;
              Future Events: {{ futureEvents }}
          &lt;/div&gt;
          &lt;div&gt;
              Past Events: {{ pastEvents }}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from 'vuex'
  
  export default {
    computed: {
      ...mapState(['allEvents']),
  
      futureEvents () {
        return this.$store.state.allEvents.filter(allEvents =&gt; allEvents.dtstart &gt;= '20190517T010000Z').length
      },
  
      pastEvents () {
        return this.$store.state.allEvents.filter(allEvents =&gt; allEvents.dtstart &lt;= '20190517T235900Z').length
      },
  
      createdEvents () {
        return this.$store.state.allEvents.filter(
          allEvents =&gt; allEvents.created &gt;= '20190511T235900Z' &amp;&amp; allEvents.created &lt;= '20190517T235900Z' )
          .length
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code works - but it is hardcoded right now and it needs to be dynamic.  Any thoughts or suggestions would be welcome.</p>