import and call function within Method not working - vue.js

Question

I am creating a small VueJs app, that calls the NASA image API and displays on the screen.
In the Header component (below) I have a search bar, when clicked this will call the Axios method defined in another file, I understood from the documents that if import functions to component then they need to be defined in the 'methods'. However, when I click search nothing displays on the console?
note: the call to NASA has been tested and does work when I include in the component. Which I guess begs the question if I should leave it in the component as I won't use it elsewhere.
but would still like to understand the logic behind the issue.
component code:
<template>
<div>
<h1>Nasa Image Search</h1>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" />
<button v-on:click="search" type="submit">Search</button>
</form>
</div>
</div>
</template>
<script>
import nasa from '../apiCall'
export default {
name: 'Header',
methods: {
search : function(){
nasa
}
}
}
</script>
Axios function call:
import axios from 'axios'
const nasa = () => {
var url = `https://images-api.nasa.gov/search?q=apollo-13&media_type=image`
console.log(url) //bug testing
axios
.get(url)
.then(function(response) {
// handle success
console.log(response)
})
.catch(function(error) {
// handle error
console.error(error)
})
}
export default { nasa }

Answer 1

Your default export is actually an object with a function property, like this:
{
nasa: () => { ... }
}
When you import the object, you give it the name nasa, so you'd actually have to call the function like:
nasa.nasa()
Since you probably intend to just export the function, leave your import as is but change your export to:
export default nasa; // no brackets
And in your component, you don't need to embed that in a method, you can set it directly to the search method:
methods: {
search: nasa
}