Vue表单提交时如何同时实现CSRF防护和验证码验证？

在开发登录表单时，我需要同时处理CSRF防护和验证码验证。现在遇到的问题是：当用户刷新验证码时，CSRF令牌没有同步更新，导致表单提交时后端返回验证失败。我尝试在获取验证码接口里携带CSRF令牌，但发现令牌值始终是初始化时的旧值。

这是我的Vue表单组件代码：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.username">
    <input v-model="formData.password">
    <img :src="captchaUrl" @click="refreshCaptcha">
    <input v-model="formData.code">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        code: '',
        _csrf: '' // 从cookie获取的初始值
      },
      captchaUrl: <code>/api/captcha?_=${Date.now()}</code>
    }
  },
  methods: {
    refreshCaptcha() {
      this.captchaUrl = <code>/api/captcha?_=${Date.now()}</code>;
    },
    async submitForm() {
      try {
        await this.$axios.post('/login', this.formData, {
          headers: {'X-CSRF-Token': this.formData._csrf}
        });
      } catch(err) {
        console.error('验证失败', err);
      }
    }
  }
}
</script>

问题具体出现在：当我点击刷新验证码时，虽然图片更新了，但后端返回的新的CSRF令牌没有被正确捕获。我应该在哪个生命周期阶段重新获取CSRF令牌？是否需要在刷新验证码时同时更新令牌？