menu background images not loaded on mobile

components/SiteMenu.vue

@@ -22,7 +22,7 @@
           >
             <div v-if="item.bgImgUrl"
                  class="menu-background menu-link-background"
-                 :style="{ 'background-image': `url(${item.bgImgUrl})` }"
+                 :style="{ 'background-image': loadMenuImages ? `url(${item.bgImgUrl})` : 'none' }"
             >
             </div>
             <nuxt-link class="site-nav__link"
@@ -78,7 +78,7 @@ export default {
 
   data () {
     return {
-      loadMenuImages: false,
+      loadMenuImages: true,
       siteNav: [
         { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
         { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
@@ -94,6 +94,11 @@ export default {
       ]
     }
   },
+
+  mounted () {
+    const mq = window.matchMedia("(min-width: 40em)")
+    this.loadMenuImages = mq.matches
+  },
 }
 </script>