fix: watch settings on ready

src/common/ui/setting-check.vue

@@ -20,8 +20,8 @@ export default {
       value: null,
     };
   },
-  watch: {
-    value(value) {
+  methods: {
+    onChange(value) {
       // Maxthon is recognized as Chrome in Vue.js.
       // Due to vuejs/vue#4521, model is updated actually on click.
       // Normally `click` event should be fired before `change` event.
@@ -35,13 +35,16 @@ export default {
     },
   },
   created() {
-    this.value = options.get(this.name);
-    this.revoke = hookSetting(this.name, value => {
-      this.value = value;
+    options.ready(() => {
+      this.value = options.get(this.name);
+      this.revoke = hookSetting(this.name, value => {
+        this.value = value;
+      });
+      this.$watch('value', this.onChange);
     });
   },
   beforeDestroy() {
-    this.revoke();
+    if (this.revoke) this.revoke();
   },
 };
 </script>

src/options/views/tab-settings/index.vue

@@ -94,11 +94,8 @@ const items = [
 const settings = {
   showAdvanced: false,
 };
-items.forEach(({ name, key, normalize }) => {
-  settings[name] = normalize(options.get(key || name));
-  hookSetting(key, value => {
-    settings[name] = value;
-  });
+items.forEach(({ name }) => {
+  settings[name] = null;
 });
 
 export default {
@@ -115,15 +112,22 @@ export default {
     return settings;
   },
   methods: {
-    getUpdater({ key, normalize }) {
+    getUpdater({ key, name, normalize }) {
       return (value, oldValue) => {
-        if (value !== oldValue) options.set(key, normalize(value));
+        if (value !== oldValue) options.set(key || name, normalize(value));
       };
     },
   },
   created() {
-    items.forEach(item => {
-      this.$watch(item.name, debounce(this.getUpdater(item), 300));
+    options.ready(() => {
+      items.forEach(item => {
+        const { name, key, normalize } = item;
+        settings[name] = normalize(options.get(key || name));
+        hookSetting(key, value => {
+          settings[name] = value;
+        });
+        this.$watch(name, debounce(this.getUpdater(item), 300));
+      });
     });
   },
 };