Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

const search  = ref('');
const rawList = ref(['Apple', 'Apricot', 'Banana', 'Blueberry', 'Cherry']);

// ── computed: cached filtered list ────────────
const filtered = computed(() =>
  rawList.value.filter(item =>
    item.toLowerCase().includes(search.value.toLowerCase())
  )
);

// ── method: always re-runs (no cache) ─────────
function getFiltered() {
  return rawList.value.filter(item =>
    item.toLowerCase().includes(search.value.toLowerCase())
  );
}

// ── watcher: side effect on change ────────────
const searchLog = ref([]);
watch(search, (newVal) => {
  // Side effect — not a derived value
  searchLog.value.push({ query: newVal, ts: Date.now() });
  // Could also debounce + call API here
});
</script>

<template>
  <input v-model="search" placeholder="Search fruit…" />
  
  <li v-for="f in filtered" :key="f">{{ f }}</li>
  <p>{{ searchLog.length }} searches logged</p>
</template>