In the example below I want token inside useFirstComposable to be updated from within useSecondComposable.

My current ideas are:

1. useSecondComposable takes a Ref as a param and updates it
2. useSecondComposable takes no params, and instead calls useFirstComposable and updates the exported Ref.

Which of these is considered best practice? Or maybe there is a 3rd even better way?

I have also been reading Vue docs about using input values and the suggestion to use toValue() to unwrap composable input values. But that would break the reactivity and not update it in the first composable.

Overall I’m confused about the best way to do this, any guidance would be great.

useFirstComposable

export const useFirstComposable = () => {
  // Start with a normal ref
  const token = ref();

  // Assign it a value
  token.value = "foo";

  // Watching the ref to see when it changes here in the first composable
  watchEffect(() => {
    console.log("first composable token has updated: ", token.value);
  });

  // return it so it can be used in another composable
  return token;
};

Option 1: useSecondComposable takes a Ref as a param and updates it

export const useSecondComposable = (firstComposableToken: Ref<string>) => {
  // Reasssign it a new value
  firstComposableToken.value = "bar";

  // Watching the ref to see when it changes here
  watchEffect(() => {
    console.log("second composable has updated the token: ", firstComposableToken.value);
  });
};

And it would be used in the Vue SFC <script> like so:

const token = useFirstComposable();
useSecondComposable(token);

Option 2: useSecondComposable takes no params, and instead calls useFirstComposable and updates the exported Ref.

export const useSecondComposable = () => {
  // Get the first composbale token
  const firstComposableToken = useFirstComposable();

  // Reasssign it a new value
  firstComposableToken.value = "bar";

  // Watching the ref to see when it changes here
  watchEffect(() => {
    console.log(
      "second composable has updated the token: ",
      firstComposableToken.value,
    );
  });
};

And it would be used in the Vue SFC <script> like so:

useSecondComposable();