title: Computed property with matchMedia function Vue.js
body: <p>I have some problem with the matchMedia function that I wrote inside my computed property in Vue. The problem is when I load/refresh page, the function does not work.
  It only back to work after I resize the screen in Responsive Design Mode at the browser.</p>
  
  <p>Here the code of my app.js</p>
  
  <pre><code>     computed: {
          widthChange() {
              if (matchMedia) {
                      var mqT = window.matchMedia(" (max-width: 850px) and (min-width: 600px) ")
  
                      function changeWidthT(mqT) {
                      const sectionRight = document.querySelector(".section-right")
                      if (mqT.matches) {
                          sectionRight.classList.remove("col-7")
                      }
                      else {
                          sectionRight.classList.add("col-7")
                      }
                  }
  
                  mqT.addListener(changeWidthT)
              }
          }
      },
  
  </code></pre>
  
  <p>and I call the computed property inside the parent of the page</p>
  
  <pre><code>&lt;div class="frontpage-parent" :class="widthChange"&gt;...
  &lt;/div&gt;
  </code></pre>