title: Detect Action Cable connection status
body: <p>I have a Vue app that connects to a Rails back-end and need to find out whether the connection is established or not.</p>
  
  <p>In my app I do:</p>
  
  <pre><code>var app = new Vue({
      name: "Site",
      store,
      router,
      i18n,
      components: {},
      mixins: [],
      data: {
       cable: App.cable
      }
  });
  </code></pre>
  
  <p>However <code>cable.connection.disconnected</code> is always true even when actually connected. </p>
  
  <p>How can I reliably figure out (when needed) what the connection status is?</p>