import { computed } from 'vue';
import { useState, useEffect } from 'vue3-hooks';
import ajaxFetch from 'ajax-fetch-esm';
// ...
 
<p>{{ id }}</p>
<p>Counter: {{ count }}</p>
<p>{{ data.toString() }}</p>
 
// ...
setup(props) {
  // ...
 
  // all vue apps prefer using counter for example instead of hello world.
  const [count, setCount] = useState(0);
  const [data, setData] = useState({});
 
  // yes, vue3 composition api allow us passing an async function.
  // normal functions are also ok.
  // `() => props.id` means watching a computed vue3 variable.
  useEffect(async ([nextCount, nextId], [prevCount, prevId]) => {
    const timer = setTimeout(() => {
      setData(await ajaxFetch.get({ current: nextCount, id: nextId }));
    }, 500);
    // clean up
    return () => {
      clearTimeout(timer);
    };
  }, [count, () => props.id]);
 
  // ...
  return {
    // ...
    count,
    data,
    id: computed(() => props.id),
    // ...
  };
}
// ...