refactor: init new state for body

helpers/utils/composables.ts

@@ -4,6 +4,7 @@ import {
   readonly,
   Ref,
   ref,
+  watch,
 } from "@nuxtjs/composition-api"
 import { Observable, Subscription } from "rxjs"
 
@@ -58,3 +59,28 @@ export function useStream<T>(
     }
   })
 }
+
+export function pluckRef<T, K extends keyof T>(ref: Ref<T>, key: K): Ref<T[K]> {
+  return customRef((track, trigger) => {
+    const stopWatching = watch(ref, (newVal, oldVal) => {
+      if (newVal[key] !== oldVal[key]) {
+        trigger()
+      }
+    })
+
+    onBeforeUnmount(() => {
+      stopWatching()
+    })
+
+    return {
+      get() {
+        track()
+        return ref.value[key]
+      },
+      set(value: T[K]) {
+        trigger()
+        ref.value = Object.assign(ref.value, { [key]: value })
+      },
+    }
+  })
+}