title: window.scrollY in computed property is 0 on page reload, works fine with hot reload
body: <pre class="lang-html prettyprint-override"><code>&lt;div id="component-navbar" :class="hasBackground"&gt;
  </code></pre>
  
  <pre><code>computed: {
    hasBackground() {
      if (window.scrollY &gt; 0) {
        return 'has-background'
      }
    }
  }
  </code></pre>
  
  <p>I have a sticky nav bar and I want to add a background if the page scroll is greater than 0. The problem is, <code>hasBackground</code> </p>
  
  <ol>
  <li>doesn't get recalculated as the scroll changes</li>
  <li>on page refresh <code>window.scrollY</code> is always zero, even though the page is scrolled</li>
  <li>works only with hot reload when I make a change to a file.</li>
  </ol>
  
  <p>How do I do this?</p>