title: Use props in composables vue3
body: <p>I am upgrading an app from vue 2 to vue 3 and I am having some issues with composables. I'd like to use props in the composable but it doesn't seem to be working. The code sample is pulled from a working component and works fine when I leave it in the component.</p>
  <p>I assume <code>defineProps</code> isn't supported by composables, but then I am unclear how to handle it. When I pass the <code>src</code> in the parameters it loses its reactivity.</p>
  <pre class="lang-js prettyprint-override"><code>// loadImage.js
  import { defineProps, onMounted, ref, watch } from 'vue'
  
  // by convention, composable function names start with &quot;use&quot;
  export function useLoadImage() {
    let loadingImage = ref(true)
    let showImage = ref(false)
    const props = defineProps({
      src: String,
    })
    const delayShowImage = () =&gt; {
      setTimeout(() =&gt; {
        showImage.value = true
      }, 100)
    }
    const loadImage = (src) =&gt; {
      let img = new Image()
      img.onload = (e) =&gt; {
        loading.value = false
        img.onload = undefined
        img.src = undefined
        img = undefined
        delayShowImage()
      }
      img.src = src
    }
    onMounted(() =&gt; {
      if (props.src) {
        loadImage(props.src)
      }
    })
    watch(
      () =&gt; props.src,
      (val) =&gt; {
        if (val) {
          loadingImage.value = true
          loadImage(val)
        }
      },
    )
    // expose managed state as return value
    return { loadingImage, showImage }
  }
  
  </code></pre>
  <h1>Edit</h1>
  <p>This method worked for me, but the two methods mentioned in the comments below did not.</p>
  <p>I have a new question <a href="https://stackoverflow.com/questions/72409932/passing-a-single-property-to-a-composable-in-vue3">here</a>.</p>
  <pre class="lang-js prettyprint-override"><code>// loadImage.js
  import { onMounted, ref, watch } from 'vue'
  
  // by convention, composable function names start with &quot;use&quot;
  export function useLoadImage(props) {
    let loadingImage = ref(true)
    let showImage = ref(false)
  
    const delayShowImage = () =&gt; {
      setTimeout(() =&gt; {
        showImage.value = true
      }, 100)
    }
    const loadImage = (src) =&gt; {
      let img = new Image()
      img.onload = (e) =&gt; {
        loading.value = false
        img.onload = undefined
        img.src = undefined
        img = undefined
        delayShowImage()
      }
      img.src = src
    }
    onMounted(() =&gt; {
      if (props.src) {
        loadImage(props.src)
      }
    })
    watch(
      () =&gt; props.src,
      (val) =&gt; {
        if (val) {
          loadingImage.value = true
          loadImage(val)
        }
      },
    )
    // expose managed state as return value
    return { loadingImage, showImage }
  }
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;script setup&gt;
  import { defineProps, toRef } from 'vue'
  import { useLoadImage } from '../../composables/loadImage'
  
  const props = defineProps({
    src: String
  })
  const { loading, show } = useLoadImage(props)
  
  &lt;/script&gt;
  </code></pre>