title: Uncaught (in promise) TypeError: X is not a function
body: <p>I'm trying to build a vue app that searches through Spotify's API to find tracks. But I have a problem, it's saying :</p>
  <blockquote>
  <p>Uncaught (in promise) TypeError: searchTracks is not a function</p>
  </blockquote>
  <p>Whenever I called the searchTracks function. I looked for a solution but I can't seem to find it.
  I have the code to access Spotify's API (I'm still learning) on a different file (useSpotify.js)</p>
  <pre><code>import { ref } from 'vue'
  
  const useSpotify = async () =&gt; {
      let token
      const id = 'MyId'
      const secretId = 'mySecretId'
  
      const res = await fetch('https://accounts.spotify.com/api/token', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'Authorization': 'Basic ' + btoa(id + ':' + secretId)
          },
          body: 'grant_type=client_credentials'
      });
  
      token = await res.json();
      console.log(token);
  
      const searchTracks = async (searchTerm) =&gt; {
          console.log(token)
          const res = await fetch(`https://api.spotify.com/v1/search?${searchTerm}&amp;type=track`, {
              method: 'GET',
              headers: { 'Authorization': 'Bearer ' + token }
          });
          const data = ref(null)
          data.value = await res.json()
          console.log(data.value)
  
          return data.value
      }
  
      return { searchTracks }
  }
  
  export default useSpotify
  </code></pre>
  <p>And I'm calling it in the vue component just to try it   (Login.vue) You can go to //searchTry to see the code done for this try</p>
  <pre><code>&lt;template&gt;
    &lt;form @submit.prevent=&quot;handleLoginSubmit&quot;&gt;
      &lt;h3&gt;Login&lt;/h3&gt;
      &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot; v-model=&quot;email&quot; /&gt;
      &lt;input type=&quot;password&quot; placeholder=&quot;Password&quot; v-model=&quot;password&quot; /&gt;
      &lt;div class=&quot;error&quot; v-if=&quot;error&quot;&gt;{{error}}&lt;/div&gt;
      &lt;button v-if=&quot;!isPending&quot;&gt;Login&lt;/button&gt;
      &lt;button v-if=&quot;isPending&quot; disabled&gt;Loading..&lt;/button&gt;
    &lt;/form&gt;
    &lt;input type=&quot;text&quot; v-model=&quot;searchTerm&quot;&gt;
    &lt;button @click=&quot;search&quot;&gt;search&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import useLogin from &quot;@/composables/useLogin&quot;;
  import { ref } from '@vue/reactivity';
  import { useRouter } from 'vue-router';
  // searchTry
  import useSpotify from '../../composables/spotifyApi/useSpotify'
  // searchTry
  export default {
    setup() {
      const {error, isPending, login} = useLogin()
      const router = useRouter()
  
      const email = ref('')
      const password = ref('')
  
      const handleLoginSubmit = async () =&gt;{
        const res = await login(email.value, password.value)
        if(!error.value){
          router.push({name: 'UserPlaylists'})
        }
      }
      // search try
      const searchTerm = ref('')
      const {searchTracks} = useSpotify()
      const search = async () =&gt;{
        const res = searchTracks(searchTerm.value)
      }
      // search try
  
      return{email, password, isPending, error, handleLoginSubmit, searchTerm, search}
    },
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  </code></pre>
  
  I don't understand where is the problem coming from. Please help (I'm still not good on javascript point me to the mistakes I've made)