In top-level imports, all variables and functions declared in <script setup> are automatically usable in the template of the same component. Think of the template as a JavaScript function declared in the same scope – it naturally has access to everything declared alongside it.
In the above example, you can see I have used <script setup>, it is the post popular used syntax for developers because it is very convenient and easy to use and reduces multiple lines of code.