Separate components unintentionally updating one another

import { type Writable }      from 'svelte/store';
import { type TJSDocument }   from '#runtime/svelte/store/fvtt/document';
import { writableDerived }    from "#runtime/svelte/store/writable-derived";
import { isObject }           from '#runtime/util/object';

/**
 * Currently supports object data as the flag value.
 *
 * @param doc     TJSDocument instance.
 *
 * @param scope   The flag scope which namespaces the key.
 *
 * @param key     The flag key.
 *
 * @param [defaultValue] Optional default flag value.
 */
export function docFlagDerived<T>(doc: TJSDocument, scope: string, key: string, defaultValue: T = void 0): Writable<T>
{
   return writableDerived(
    doc,
    $doc => $doc.getFlag(scope, key) ?? defaultValue,
    (data, doc) => {
       function changeValue(data: unknown) {
          if (isObject(data)) {
             // iterating over the object using for..in
             for (const key in data) {
                if (data[key] === null) {
                   if (key.startsWith('-=')) {
                      delete data[key]
                      continue
                   }
                   data[`-=${key}`] = null
                   delete data[key]
                } else if (isObject(data[key])) {
                   changeValue(data[key])
                }
             }
          }
          return data
       }

       doc.setFlag(scope, key, changeValue(data))
       return doc
    },
   ) as Writable<T>;
}

import { type Writable }      from 'svelte/store';
import { type TJSDocument }   from '#runtime/svelte/store/fvtt/document';
import { writableDerived }    from "#runtime/svelte/store/writable-derived";
import { isObject }           from '#runtime/util/object';

/**
 * Currently supports object data as the flag value.
 *
 * @param doc     TJSDocument instance.
 *
 * @param scope   The flag scope which namespaces the key.
 *
 * @param key     The flag key.
 *
 * @param [defaultValue] Optional default flag value.
 */
export function docFlagDerived<T>(doc: TJSDocument, scope: string, key: string, defaultValue: T = void 0): Writable<T>
{
   return writableDerived(
    doc,
    $doc => $doc.getFlag(scope, key) ?? defaultValue,
    (data, doc) => {
       function changeValue(data: unknown) {
          if (isObject(data)) {
             // iterating over the object using for..in
             for (const key in data) {
                if (data[key] === null) {
                   if (key.startsWith('-=')) {
                      delete data[key]
                      continue
                   }
                   data[`-=${key}`] = null
                   delete data[key]
                } else if (isObject(data[key])) {
                   changeValue(data[key])
                }
             }
          }
          return data
       }

       doc.setFlag(scope, key, changeValue(data))
       return doc
    },
   ) as Writable<T>;
}