Using Async/Await Directly in a Vue Component Script

[CClotho]

I just recently started learning Vue framework, and as I'm exploring and searching for how to fetch data in Vue,. I stumbled upon a technique that seemed unconventional yet functional.

The core of this technique involves directly calling an async function within a Vue component script and utilizing the resolved data in the template without encountering issues. This approach appeared unconventional to me, as I couldn't find similar examples online, leading me to question its validity and the reasons behind its functionality. So I just wanna know if anyone does this and if yes or not, why?

So I created a simple function that fetches a data on a separate file and imported it and used it on my Vue component.

//Data.js

export const useFetch = (async(url)=> {
	
   const response = await fetch(url); 
   const data = await response.json();
   return data;
}

// App.vue

<script>
  const newData = await useFetch('https://jsonplaceholder.typicode.com/todos/1');
</script>

<script setup>
 import {useFetch} from './Data.js';



</script>

<template>

<div>
 {{newData.title}} <!-- This works -->
</div>

	
</template>

If I were to call that useFetch() inside my <script setup> it won't work and it would also throw an error of not using it with Suspense unless I use it on onMount() or watchEffect (which should be normal) but the thing here is why did it work and rendered the data without any problem in this kind of structure?

p.s I never do this kind of structure but I just wanted to try it out to see if it works

[CClotho]

up