Problem with reactivity understanding

[biwchi]

I have a problem with the Vue reactivity system. Below you can see a store that contains a ref called data with the data structure Record<string, Array<SomeItems>>.

My goal is that when a component uses a key from data, it should fetch the data if the value is null and return an empty array. Later, when the data is received, it should be assigned to data[key].

I use computedWithControl from VueUse. When data changes, the computed properties that depend on fields should be triggered to recompute. However, not only does this not work properly, but it also breaks some other computed properties in this computed chain.

export const useFieldsStore = defineStore('fields', () => {
  const loading = ref<`${Entity}`[]>([])
  const data = ref<FieldsDictionaryNullable>(DEFAULT_FIELD)

 const fields = computedWithControl(data, () => ({
    get deals() {
      return get(Entity.DEALS)
    },
    get tasks() {
      return get(Entity.TASKS)
    },
    get creditors() {
      return get(Entity.CREDITORS)
    },
    get users() {
      return get(Entity.USERS)
    },
    get document_templates() {
      return get(Entity.DOCUMENT_TEMPLATES)
    },
  }))

  const get = (entity: `${Entity}`) => {
    load: if (data.value[entity] === null) {
      if (loading.value.includes(entity)) {
        break load
      }

      loading.value.push(entity)

      update(entity)
        .catch(() => (data.value[entity] = null))
        .finally(() => loading.value.splice(loading.value.indexOf(entity), 1))
    }

    return data.value[entity] ?? []
  }

  async function update(entity: EntityArg, type?: SectionViewType) {
    const updated = await useRequest<Fields>(`/fields/${entity}`, {
      query: { type },
    })

    data.value[entity] = [...updated.data.fields, ...updated.data.user_fields]
  }

  const getField = (entity: EntityArg, code: string) => {
    return fields.value[entity].find((f) => f.code === code)
  }

  const clearAll = () => {
    data.value = {
      [Entity.DEALS]: null,
      [Entity.TASKS]: null,
      [Entity.CREDITORS]: null,
      [Entity.USERS]: null,
      [Entity.DOCUMENT_TEMPLATES]: null,
    }
  }

  return { fields, update, getField, clearAll }
})

The problem is that when some key of the "data" ref is changed, it doesn't trigger the recomputation of all computed properties that depend on it.

const { update } = fieldsStore
const { fields: storedFields } = storeToRefs(fieldsStore)

const allFields = computed(() => storedFields.value[props.entity])
const fields = computed(() => {
  return allFields.value.flat().filter((field) => {
    if (props.isFilters) {
      return field.type !== 'file'
    }

    return field
  })
})

I tried lots of things such as creating customRef and manually triggering updates when I change the data state, but I didn't achieve the expected result.

Anyone who can help me or explain what I am doing wrong, I would be very grateful.🙏

[s3xysteak]

const fields = computed(() => {
  if (!data.value) {
    update()
    return []
  }
  return data.value
})

See the playground. Hope it will help you. If you have any more questions, you can edit the code in playground and share the url here.