title: How to change vue.js data value when screen size changes?
body: <p>
  </p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;ul&gt;
          &lt;!-- On mobile devices use short heading --&gt;
          &lt;template v-if="mobile == 1"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Heading&lt;/a&gt;&lt;/li&gt;
          &lt;/template&gt;
          &lt;!-- Else use long heading --&gt;
          &lt;template v-else-if="mobile == 0"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Heading Long&lt;/a&gt;&lt;/li&gt;
          &lt;/template&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script src="https://unpkg.com/vue@2.1.10/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var app = new Vue({
              el: '#app',
              data: {
                  mobile: 0
              }
  });
  </code></pre>
  
  <p></p>
  
  <p>
  </p>
  
  <p>I'm looking for a way to change the value of 'mobile' when the screen breakpoint of (max-width: 547px) becomes active. And to change it back when this mobile breakpoint becomes inactive (screen goes over 547px). I normally use skel (<a href="https://github.com/ajlkn/skel" rel="noreferrer">https://github.com/ajlkn/skel</a>) to deal with screen breakpoints, but I cannot access skel from inside Vue, or vice-versa. I would forego using Vue for this particular task, but display: none, and display: block throws off my presentation--turning my element into a block.</p>