Как не потерять реактивность prop в Vue composable

Условие

В Vue 3 вызвано useSearch(props.query). Composable получает строку и наблюдает её, но дальнейшие изменения prop не доходят. Как передать реактивный источник?

Ответ

Передайте getter () => props.query либо ref свойства через toRef. Передача текущей строки копирует значение, а не связь с изменяющимся prop.

Контракт с getter:

function useSearch(getQuery) {
  watch(getQuery, value => {
    // Запустить поиск по новому value.
  }, { immediate: true });
}
useSearch(() => props.query);

Здесь watch импортируется из vue и отслеживает чтение prop. Если composable принимает разные виды источников, нормализуйте их внутри реактивного наблюдения, а не один раз при создании.

Источник: vuejs.org.