Replace @input with v-model

Author: DannyFeliz

src/components/InputSearch.vue

@@ -2,7 +2,7 @@
   <div class="row input-search">
     <div class="input-field col s12">
       <i class="material-icons prefix">search</i>
-      <input id="search" type="search" @input="onChange" autocomplete="off" />
+      <input id="search" type="search" v-model="searchTerm" autocomplete="off" />
       <label for="search">{{ label }}</label>
     </div>
   </div>
@@ -17,9 +17,22 @@ export default {
       required: true
     }
   },
-  methods: {
-    onChange({ target: { value } }) {
-      this.$emit("input", value.trim());
+  data() {
+    return {
+      searchTerm: ""
+    };
+  },
+  activated() {
+    this.searchTerm = "";
+    // We are using keep-alive, and when we leave the screen while the input is focused all
+    // the states are preserved, so we need to restore the input to its initial state.
+    this.$nextTick(() => {
+      M.updateTextFields();
+    });
+  },
+  watch: {
+    searchTerm(newVal) {
+      this.$emit("input", newVal.trim());
     }
   }
 };