Composable with the arguments being either a WritableComputedRef or a normal Ref value

[Khalifa1997]

Hi guys 👋🏽,

I've been wanting to ask this question since I haven't seen it covered in the docs or any online tutorials.

Currently, I'm working with the following composable:

import { Ref, computed } from "vue";

export function useExpandCollapse(
  isExpanded: Ref<boolean>,
  collapseText = "Collapse",
  expandText = "Expand",
) {
  const toggleExpandCollapse = () => {
    isExpanded.value = !isExpanded.value;
  };

  const expandCollapseText = computed((): string =>
    isExpanded.value ? collapseText : expandText,
  );

  return {
    toggleExpandCollapse,
    expandCollapseText,
  };
}

It's a straightforward composable that toggles a ref value and returns text based on the current state.

However, I encountered a problem at work: what if isExpanded is a WritableComputedRef? This means when updating the passed-in isExpanded value, the component should emit new values.

To address this, and because we use the Options API in some components, I made the following adjustments in my component AppCollapsible.vue:

  setup(props, { emit }) {
    const model = computed({
      get: () => props.modelValue,
      set: (value: boolean) => emit("update:modelValue", value),
    });

    const { expandCollapseText } = useExpandCollapse(model);

    return {
      expandCollapseText,
    };
  },

  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },

By creating a model inside the setup function and passing it, I aimed to facilitate this. However, when I created a pull request, my teammate suggested that it's not a good practice. They argued that each composable should manage its own state internally, implying that isExpanded should not be an argument but rather an inner ref value within the composable, which should then be returned.

I disagreed with this approach because, for components like AppCollapsible, it would necessitate adding an extra watcher to sync the model value with the composable state. This seems to add unnecessary complexity for what should be a straightforward implementation.

I'm open to being corrected on this and would appreciate your opinions!

Thank you for your time!