Olá,  
Sou quase que completamente noob no JavaScript. Fiz alguns projetos em django e resolvi ampliar um pouco o conhecimento.  
Um problema que eu sempre tive foi chamar funções e obter seu valores em tempo real: um exemplo seria tentar carregar um relógio no Python pela sintaxe do template. Ela conseguia obter o valor somente na primeira chamada e para atualizar também deveria atualizar a página.  
Porém meu problema hoje não é Python. Comecei a fazer uma página simples e acabei precisando usar um "media query" para sinalizar a mudança de tamanho da janela. O problema é que o valor fica constantemente travado em false ou true até atualizar a página. Tentei usar o eventListener e descobri que eu definitivamente não sei JS.  
Segue o código:  

    <body>
      <div id="hello">
        {{ query }}
      </div>

      <script>
        var mediaSize = matchMedia('(max-width: 576px)').matches

        new Vue({
          el: '#hello',
          data: {
            query: mediaSize
          }
        })
      </script>

    </body>

Eu tive algumas dificuldades para escrever o HTML aqui, as barra são só por organização. Fora isso, só coloque o CDN do Vue no head, nem título mudei.

Na página do navegador o resultado é sempre True ou False, só mudando caso atualize a página.  
Acho que eu expliquei o melhor que pude. Desde já obrigado.