Axios Vue Js: How to get the value of this object to show in api get request url

this is my vue file which accepts the id from table. this works I can get the data id from the table row

  showProd (id) {
   Products.showProd().then((response) => {
     console.log(show1prod.product_name)
   })
   .catch((error) => {
     alert(error)
   })

this is my config file for calling the axios.get I can reach the backend but not generating the query because this url/api sends an object I believe not the id number

export default {
    async showProd(id) {
        return Api.get('/products/{id}',id)
    },

    loadProds () {
        return Api.get('/products')
    }

}

First make sure your API call is correct:

export default {
    showProd(id) { // async not needed, axios returns promise
        return axios.get('/products/' + id)
    },

    loadProds () {
        return axios.get('/products')
    }
}

You can than call these functions:

showProd (id) {
   Products.showProd(id).then((response) => { // Note the id in the call
     console.log(response.data.product_name) // Use the response object
   })
   .catch((error) => {
     alert(error)
   })