title: Why does Vue 3's `setup(props) { props.id }` return undefined
body: <p>Why does <code>setup(props) { props.id }</code> return <code>undefined</code> from <code>watchEffect(() =&gt; fetch(getUrl())</code> callback, (Vue 3 <code>watchEffect</code> function)?</p>
  <p>example using function <code>useFetch(() =&gt; url)</code></p>
  <p>i.e,<br />
  <code>const { data, error, isPending } = useFetch(() =&gt; https://jsonplaceholder.typicode.com/todos/${props.id})</code></p>
  <p>results to <code>https://jsonplaceholder.typicode.com/todos/undefined</code></p>
  <p>expected: <code>https://jsonplaceholder.typicode.com/todos/1 // id++ { 2, 3, ... }</code></p>
  <p>See the code snippet below;</p>
  <pre><code>&lt;script src=&quot;https://unpkg.com/vue@next&quot;&gt;&lt;/script&gt;
  
  &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  
  &lt;script&gt;
    const { createApp, ref, watchEffect } = Vue; 
  
    useFetch(getUrl =&gt; {  
      const data = ref(null)          
      const error = ref(null)           
      const isPending = ref(true)
  
      watchEffect(() =&gt; fetch(getUrl())
        isPending.value = true
        data.value = null
        error.value = null
  
      return { data, error, isPending }
    })
  
    const Post = {
      template: `...`,
      setup(props) {
        console.log(&quot;setup props.id: &quot;, props.id)  // returns undefined
        
        const { data, error, isPending } = useFetch(() =&gt; `https://jsonplaceholder.typicode.com/todos/${props.id}`) // jsonplaceholder.typicode.com/todos/undefined
      }
    }
    
    const App = {
      components: { Post },
      data() {
        return {
          id: 1
        }
      },
      template: `
      &lt;button @click=&quot;id++&quot;&gt;change ID&lt;/button&gt;
      &lt;Post :id=&quot;id&quot;/&gt;
      `   
    }
  
    createApp(App).mount(&quot;#app&quot;);
  &lt;/script&gt;
  </code></pre>