fixed spacing issues and counter check edge case

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <header>
+    <header id="header">
       <span>Counter</span>
     </header>
     <main>
@@ -29,6 +29,7 @@ export default {
 
 main {
   text-align: center;
+  height: calc( 100% - 56px );
   /* margin-top: 40px; */
 }
 
@@ -51,7 +52,7 @@ header span {
   padding-top: 16px;
 }
 
-html, body, main, counter {
+html, body, counter {
     margin: 0;
     height: 100%;
 }

src/components/Counter.vue

@@ -2,7 +2,7 @@
   <div class="counter">
       <div class="count-top">
         <label class="upper-label" for="limit" @click="reset">Limit</label>
-        <input class="upper-input" name="limit" type="number" v-model="countBound" placeholder="10"/>
+        <input class="upper-input" name="limit" type="number" pattern="[0-9]*" v-model="countBound" placeholder="10"/>
       </div>
       <div @click="bumpCount" :style="countStyle" class="count-bottom">
           <div class="value">{{ countCurrent }}</div>
@@ -35,6 +35,13 @@ export default {
         this.countCurrent = this.countCurrent + 1
       }
 
+      this.checkLimit()
+    },
+    reset () {
+      this.countCurrent = 0
+      this.limitReached = false
+    },
+    checkLimit () {
       this.limitReached = (this.countCurrent >= this.countBound)
 
       if (this.limitReached) {
@@ -43,11 +50,10 @@ export default {
       } else {
         this.countStyle.backgroundColor = '#179e63'
       }
-    },
-    reset () {
-      this.countCurrent = 0
-      this.limitReached = false
     }
+  },
+  watch: {
+    countBound: function () { this.checkLimit() }
   }
 }
 </script>
@@ -77,6 +83,7 @@ export default {
   vertical-align: middle;
   align-self: flex-end;
   margin: auto;
+  padding-right: 10px;
 }
 .upper-input {
   font-size: 1em;