Refactor <dougal-project-settings-raw-ntbp/>

lib/www/client/source/src/components/project-settings/input-raw-ntbp.vue

@@ -8,14 +8,14 @@
           label="Pattern"
           hint="Regular expression text"
           persistent-hint
-          v-model="regex"
+          v-model="regex_"
         >
         </v-text-field>
         <v-text-field
           label="Flags"
           hint="Regular expression modifier flags"
           persistent-hint
-          v-model="flags"
+          v-model="flags_"
         >
         </v-text-field>
       </v-form>
@@ -40,35 +40,44 @@
 </template>
 
 <script>
+import { deepCompare, deepMerge } from '@/lib/utils';
+import setIfDifferent from '@/lib/watcher-mixin';
 
 export default {
   name: "DougalProjectSettingsRawNTBP",
 
-  props: [ "value" ],
+  mixins: [
+    setIfDifferent({
+      regex: "regex_",
+      flags: "flags_"
+    })
+  ],
+
+  props: [ "regex", "flags" ],
 
   data () {
     return {
-      regex: "NTBP",
-      flags: "i"
+      regex_: "NTBP",
+      flags_: "i"
     }
   },
 
   watch: {
-    value (newValue) {
-      this.reset();
-    }
   },
 
   methods: {
 
     reset () {
-      for (const key of Object.keys(this.$data)) {
-        this[key] = this.value[key];
-      }
+      this.regex_ = this.regex;
+      this.flags_ = this.flags;
     },
 
     save () {
-      this.$emit('input', {...this.$data});
+      this.$emit('merge', [ ["raw", "ntbp"], {
+        regex: this.regex_,
+        flags: this.flags_
+      }]);
+      this.$nextTick(this.reset);
     },
 
     back () {