Skip to content
intermediate

Watchers

Use watch and watchEffect to react to state changes.

import { ref, _____, watchEffect } from 'vue'

export function useSearch() {
  const query = ref('')
  const results = ref<string[]>([])
  const isLoading = ref(false)
  const searchHistory = ref<string[]>([])

  // Watch query changes and update history
  watch(_____, (newQuery, oldQuery) => {
    if (newQuery && newQuery !== oldQuery) {
      searchHistory.value.__________...
    }
  })

  // Simulated search function
  async function performSearch(q: string): Promise<string[]> {
    await new Promise(r => setTimeout(r, 100))
    return [`Result 1 for ${q}`, `Result 2 for ${q}`]
  }

  // Watch with async handler
  watch(query, async (newQuery) => {
    if (!newQuery) {
      results.value = []
      return
    }
    __________...
    results.value = await performSearch(newQuery)
    isLoading.value = false
  })

  return { query, results, isLoading, searchHistory }
}
0/4 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code