Use mounted hook to avoid hydration errors

Author: CyberAP

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-component-media-queries",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "Component-based media query matcher for Vue",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package.json

@@ -34,7 +34,7 @@ export const MatchMedia = Vue.extend({
       matches: this.fallback,
     };
   },
-  beforeMount() {
+  mounted() {
     if (this.query) {
       const matcher = this.matcher = window.matchMedia(this.query);
       matcher.addListener(this.onMedia);

src/MatchMedia.ts

@@ -29,7 +29,9 @@ export const MediaQueryProvider = Vue.extend({
   },
   data(): Data {
     const mediaQueries = {} as MediaQueriesProvision;
-    const { fallback } = this;
+    const { fallback, queries } = this;
+
+    Object.keys(queries).forEach(key => { mediaQueries[key] = false; });
 
     if (fallback) {
       if (Array.isArray(fallback)) {
@@ -41,7 +43,8 @@ export const MediaQueryProvider = Vue.extend({
 
     return { mediaQueries, matchers: [] };
   },
-  beforeMount() {
+  // Matching on mounted to avoid hydration errors
+  mounted() {
     const { queries, mediaQueries } = this;
 
     for (const key in queries) {