title: 'window' is not defined in Vue.js 2
body: <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>