Vue Composition Api - watch property imported from external composition function

Question

I have external composition function where i declare property like this:

export default function useDescription() {
  const description = ref('');

  return {
    description
  }
}

Then, I would like to import this property in other component, inside the setup method and watch for the changes like this:

setup() {
  const { description } = useDescription();
  watch(description, (value) => {
    //do sth
  })
}

Unfortunately it does not work.

Answer 1

Remove the ref property outside the function in order to be accessible from both components :

import { ref, watch } from "vue";
const description = ref("");
export default function useDescription() {
  return { description };
}

and

setup() {
  const { description } = useDescription();
  watch(()=>description, (value) => {
    //do sth
  })
}