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.

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

<script>
export default {
  data() {
    return {
      telephone: this.$auth.user["https://myapp.example.com/user_metadata"]["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(
        differentAudienceOptions
      );
      const metadata = { telephone: this.telephone };
      await axios.patch(
        `https://${process.env.VUE_APP_AUTH0_DOMAIN}/api/v2/users/` +
          this.$auth.user.sub,
        { user_metadata: metadata },
        { headers: { Authorization: `Bearer ${token}` } }
      );
    },
  },
};
</script>

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.