How to regenerate tokens after using the Management API

Hi there,

I am building a SPA in Vue.js with auth0-spa-js.
Following this post, I created a feature to update user_metadata using the Management API.

    <v-text-field v-model="telephone" name="telephone"></v-text-field>
    <v-btn @click="patchUserData">
      <strong>Update user_metadata</strong>

export default {
  data() {
    return {
      telephone: this.$auth.user[""]["telephone"],
  methods: {
    async patchUserData() {
      const differentAudienceOptions = {
        audience: `https://${process.env.VUE_APP_AUTH0_DOMAIN}/api/v2/`,
        scope: "update:current_user_metadata",
      const token = await this.$auth.getTokenWithPopup(
      const metadata = { telephone: this.telephone };
      await axios.patch(
        `https://${process.env.VUE_APP_AUTH0_DOMAIN}/api/v2/users/` +
        { user_metadata: metadata },
        { headers: { Authorization: `Bearer ${token}` } }

However, when I reload this page, the old information is displayed.
(I think I need to regenerate some tokens because the display changes when I log in again.)

Does using $auth.getTokenSilently() solve this problem?
I’m not use to Vue.js, so it would be great to get some sample code.