refactor: remove vue-rx dependency

components/smart/AccentModePicker.vue

@@ -23,25 +23,19 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   HoppAccentColors,
   HoppAccentColor,
-  getSettingSubject,
-  settingsStore,
   applySetting,
+  useSetting,
 } from "~/newstore/settings"
 
-export default Vue.extend({
-  data() {
+export default defineComponent({
+  setup() {
     return {
       accentColors: HoppAccentColors,
-      active: settingsStore.value.THEME_COLOR,
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("THEME_COLOR"),
+      active: useSetting("THEME_COLOR"),
     }
   },
   methods: {

components/smart/ColorModePicker.vue

@@ -15,23 +15,19 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   applySetting,
-  getSettingSubject,
   HoppBgColor,
   HoppBgColors,
+  useSetting,
 } from "~/newstore/settings"
 
-export default Vue.extend({
-  data() {
+export default defineComponent({
+  setup() {
     return {
       colors: HoppBgColors,
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("BG_COLOR"),
+      active: useSetting("BG_COLOR"),
     }
   },
   methods: {

components/smart/FontSizePicker.vue

@@ -29,25 +29,19 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
-  getSettingSubject,
   HoppFontSize,
-  settingsStore,
   applySetting,
+  useSetting,
 } from "~/newstore/settings"
 
-export default Vue.extend({
-  data() {
+export default defineComponent({
+  setup() {
     return {
       fontSizes: HoppFontSizes,
-      active: settingsStore.value.FONT_SIZE,
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("FONT_SIZE"),
+      active: useSetting("FONT_SIZE"),
     }
   },
   methods: {