Add water consumption functionality

pages/index/Add-Water.vue

 <template>
   <section class="tracker-section">
-    <MililiterInput :id="'add-water'">
+    <MililiterInput :id="'add-water'" v-model="waterAddition">
       <!--suppress XmlInvalidId -->
       <label for="add-water">How much water did you drink?</label>
     </MililiterInput>
@@ -11,7 +11,35 @@
 </template>
 
 <script>
-
+export default {
+  data() {
+    return {
+      waterAddition: undefined
+    }
+  },
+  watch: {
+    async waterAddition() {
+      if (this.waterAddition === undefined || this.waterAddition === null) {
+        return
+      }
+      await this.$axios.post('api/consumption', null, {
+        params: { amount: this.waterAddition }
+      })
+      const consumptionResponse = await this.$axios.get('/api/consumption/total', {
+        params: { begin: this.UTCFloor() }
+      })
+      await this.$router.push('/')
+      this.$store.commit('setConsumption', consumptionResponse.data.average)
+    }
+  },
+  methods: {
+    UTCFloor() {
+      // https://stackoverflow.com/a/53096398/14851412
+      const date = new Date()
+      return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDay()))
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">