title: InvalidStateError while accessing WebSocket
body: <p>I've configured a simple Vue project using the vue-cli tool:</p>
  
  <pre class="lang-sh prettyprint-override"><code>vue init webpack my-project
  </code></pre>
  
  <p>Now I want to send some information through a web socket before the page gets rendered. Since I don't want to tie this logic to the Vue component, I have a different js file (named <code>ws.js</code> and based in <a href="https://stackoverflow.com/a/46699969/1199132">this</a>):</p>
  
  <pre><code>import Vue from 'vue'
  
  const websocket = new WebSocket('ws://localhost:1234')
  
  const emitter = new Vue({
    name: 'emitter',
    methods: {
      send (message) {
        websocket.send(JSON.stringify(message))
      }
    }
  })
  
  export default emitter
  </code></pre>
  
  <p>When the page loads, I use the <code>emitter</code> object to send some info:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="hello"&gt;
        TEST
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import emitter from '../ws/ws'
  export default {
    name: 'HelloWorld',
    beforeMount () {
      emitter.send('Hello')
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And I get this error in Firefox console:</p>
  
  <blockquote>
    <p>[Vue warn]: Error in beforeMount hook: "InvalidStateError: An attempt
    was made to use an object that is not, or is no longer, usable"</p>
    
    <p>found in</p>
    
    <p>--->  at src/components/HelloWorld.vue
            at src/App.vue
             </p>
  </blockquote>
  
  <p>What am I doing wrong? Should I attach to a different event listener rather than <code>beforeMount()</code>? If I comment out the WebSocket related lines, the error disappears:</p>
  
  <pre><code>import Vue from 'vue'
  
  // const websocket = new WebSocket('ws://localhost:1234')
  
  const emitter = new Vue({
    name: 'emitter',
    methods: {
      send (message) {
        // websocket.send(message)
      }
    }
  })
  
  export default emitter
  </code></pre>