Reactive Calendar filter

Calendar.vue

// /src/pages/Calendar.vue
// --> http://localhost:8080/calendar

<template>
  <div>
    <datetime v-model="date"></datetime>

    <ul>
      <li v-for="event in filteredList" :key="event.id">
      {{ event.node.summary }}
      </li>
    </ul>
  </div>
</template>

<page-query>
query {
  allGoogleCalendar {
    edges {
      node {
        summary
        start {
          timestamp
        }
      }
    }
  }
}
</page-query>

<script>
import { Datetime } from 'vue-datetime';
import 'vue-datetime/dist/vue-datetime.css';
import moment from 'moment';


export default {
  data() {
    return {
      date: moment().format()
    }
  },
  components: {
    datetime: Datetime
  },
  computed: {
    filteredList() {
      return this.$page.allGoogleCalendar.edges.filter(element => {
        return element.node.start.timestamp >= moment(this.date).unix();
      });
    }
  },
}
</script>

gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@jammeryhq/gridsome-source-google-calendar',
      options: {
        calendarId: '[email protected]',
        apiKey: 'XXX'
      },
    },
  ]
}

package.json

{
  "name": "google-calendar",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@jammeryhq/gridsome-source-google-calendar": "github:jammeryhq/gridsome-source-google-calendar",
    "gridsome": "^0.7.0",
    "luxon": "^1.25.0",
    "vue-datetime": "^1.0.0-beta.14",
    "weekstart": "^1.0.1",
    "moment": "2.29.1"
  }
}