Impossible to link process.env to Heroku config vars in vue JS application

Im working into a fullstack project node and vue js. I deployed my project into Heroku. For the node part, all worked fined with the api. But I got an issue in the front part.

I created an environment variable to connect my app to my api. It's either the URL of the online API (in production) or the local adress (in developpement mode):

import axios from 'axios'

const apiEndpoint = process.env.VUE_APP_API_ENDPOINT || 'http://localhost:3000'

function getData (resp) { return resp.data }

function createCode (email, redirectURL) {
  return axios.post(`${apiEndpoint}/auth/code?email=${encodeURIComponent(email)}&redirect_url=${encodeURIComponent(redirectURL)}`)
}
...

In heroku, I linked the variable to my API URL:

Heroku config vars

But after deployment, the app still points to localhost instead of the api URL.

If I put directly the api URL instead of the environment variable, it works fine. That's why I think the problem is the link between the env variable and heroku.

Do you know how I can manage the env variables between my Vue app and Heroku?

Thanks in advance.