'window' is not defined in Vue.js 2
<p>I'm currently upgrading my application from Vue.js 1 to Vue.js 2. I have a problem with the following function in my main component:</p>

<pre><code>&lt;script&gt;
  export default {
    ready: function listenKeyUp() {
      window.addEventListener('keyup', this.handleKeyUp());
    },

    methods: {
      handleKeyUp(e) {
        if (e.keyCode === 27) {
          this.$router.go({ name: '/' });
        }
      },
    },
  };
&lt;/script&gt;
</code></pre>

<p>My console shows this error: <code>'window' is not defined</code>
How is this possible? I don't understand the reason. How to fix this and why is this problem coming up with the new version?</p>

<p>--- EDIT ---
Some additional code:</p>

<p><strong>main.js:</strong></p>

<pre><code>// Import plugins
import Vue from 'vue';
import VueResource from 'vue-resource';
import VueI18n from 'vue-i18n';

// Import mixins
import api from './mixins/api';

// Import router config
import router from './router';


// Register plugins
Vue.use(VueResource);
Vue.use(VueI18n);
Vue.mixin(api);


// Go
new Vue({
  router,
}).$mount('#app');
</code></pre>

<p><strong>index.html:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;New website&lt;/title&gt;

        &lt;link rel="shortcut icon" href="/static/favicon.ico" /&gt;
        &lt;link rel="apple-touch-icon" href="/static/mobile.png"&gt;

        &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"&gt; 
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="app"&gt;
            &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/div&gt;

        &lt;noscript&gt;
            &lt;div class="container"&gt;
                &lt;div class="col-sm-6 col-sm-offset-3"&gt;
                    &lt;div class="alert alert-danger"&gt;
                        JavaScript is disabled in your web browser!
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/noscript&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>Main component:</strong></p>

<pre><code>&lt;template&gt;
    &lt;div&gt;

        &lt;div class="container"&gt;
            &lt;header&gt;
                HEADER HERE
            &lt;/header&gt;
        &lt;/div&gt;


        &lt;div id="modal" v-if=" $route.name !== 'home' " transition="modal"&gt;
            &lt;div id="modal-bg" :to="{ name: 'home' }"&gt;&lt;/div&gt;
            &lt;div id="modal-container"&gt;
                &lt;div id="modal-header"&gt;
                    &lt;h2&gt;Modal&lt;/h2&gt;
                    &lt;router-link id="modal-close" :to="{ name: 'home' }"&gt;X&lt;/router-link&gt;
                &lt;/div&gt;
                &lt;router-view&gt;&lt;/router-view&gt;
            &lt;/div&gt;
        &lt;/div&gt;


        &lt;nav id="primary-navigation"&gt;
            &lt;div class="container-fluid"&gt;
                &lt;div class="row"&gt;
                    NAV HERE
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/nav&gt;

    &lt;/div&gt;
&lt;/template&gt;


&lt;script&gt;
  /* SCRIPT PART, SEE TOP OF THIS POST */
&lt;/script&gt;


&lt;style lang="scss"&gt;
  /* CSS */
&lt;/style&gt;
</code></pre>