Cannot read push of "undefined" in VUE application

Question

So in my VUE application I am getting this error "Uncaught TypeError: Cannot read property 'push' of undefined". The error occurs when I click the calendar button which is supposed to bring up my calendar component.

Here is the code I deem to be important and relevant:

app.vue:

    <template>
       <div id="#app" style="height:100%">
          <router-view></router-view>
       </div>
    </template>

login.vue:

<template >
   <div class="login background" style="height:100%" v-on:click="bodywarning">
      <button id="signbtn" class="btn" v-on:click="calendar">calendar</button> //When I Click here I get the error
   </div>
</template>

<script>
   export default {
      name: 'login',
      methods: {
         calendar: function(){
            this.$router.push({name:'calendar'})
         },  
      }
   }
</script>

main.js:

import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'
import Vue from 'vue/dist/vue.js'
import Vuex from 'vuex'
import routes from './routes'
import { store } from './store.js';
import App from './App.vue'

Vue.use(require('vue-full-calendar'));
Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)

Vue.config.debug = true

const router = new Router({
   scrollBehavior: () => ({ y: 0 }),
   routes
})


Vue.component('date-picker', {
   template: '<input/>',
   mounted: function() {
      var self = this;
      $(this.$el).datepicker({
         onSelect: function(value,date) {
            self.$emit('update-date', date);
         }
      })
   },
});

new Vue({
   store,
   router,
   ...App,
}).$mount('#app')

store.js:

import Vuex from 'vuex'
import Vue from 'vue/dist/vue.js'
Vue.use(Vuex);
export const store = new Vuex.Store({
   //contains state, getters, mutations
});