feat(debug): Add proper render condition and console warnings

Author: apertureless

src/components/hideAt.vue

@@ -44,7 +44,7 @@
       }
 
       if (shouldRender) {
-        return this.$slots.default[0]
+        return this.$slots.default ? this.$slots.default[0] : null
       }
       return null
     }

src/components/showAt.vue

@@ -44,7 +44,7 @@
       }
 
       if (shouldRender) {
-        return this.$slots.default[0]
+        return this.$slots.default ? this.$slots.default[0] : null
       }
       return null
     }

src/components/withBreakpoint.vue

@@ -23,6 +23,11 @@
     mounted () {
       window.addEventListener('resize', this.handleResize)
       this.handleResize()
+      if (this.$slots.default && this.$slots.default.length > 1) {
+        console.warn('[✋ vue-breakpoints] You may only wrap one element in a <showAt> or <hideAt/> component.')
+      } else if (!this.$slots.default || this.$slots.default.length < 1) {
+        console.warn('[✋ vue-breakpoints] You must have one child inside a <showAt> or <hideAt/> component.')
+      }
     },
 
     beforeDestroy () {