The value of $mq is not correct on mouted

// main.js
Vue.use(VueMq, { 
  breakpoints: {
    xs: 468,
    sm: 768,
    md: 1080,
    lg: Infinity
  }
})

// App.js
{
  mounted () {
    console.log(this.$mq) // sm, but the viewport size was matched `lg`
  }
}

[do-adams]

Actually, upon further testing I have determined that the value of $mq for me is correct at mounted() time.

However, peeking into the source code a bit, the vue-mq plugin defaults to breakpoint size sm for all of the Vue lifecycle instance hooks up until mounted(), which causes elements that rely on v-if="$mq === 'sm'" to actually be rendered initially before being removed from the DOM.

In my case, setting the defaultBreakpoint for the plugin to lg fixed the issue.

[supremeo]

In my case, setting the defaultBreakpoint for the plugin to lg fixed the issue.

That doesn’t fix the issue. Resize your browser down and reload the page. You’ll see the same issue persist. For the issue to be resolved, defaultBreakpoint would need to be deviceWidth aware and render the appropriate breakpoint at SSR