Vue.js过滤函数仅页面重载时生效，路由跳转后筛选逻辑失效

• 存在双重过滤的设计矛盾
  • 全局方法$getUnregisteredAthletes本身已经内置完整过滤逻辑：请求运动员列表时携带expand=registrations参数关联查询每个运动员的赛事注册数据，在返回前会剔除所有已注册当前赛事的人员，正常返回的数组本身就是可供下拉框直接使用的未注册运动员集合。
  • 组件内的freeAthletes方法却额外依赖组件作用域的this.registrations做二次差集过滤，但从现有mounted逻辑来看，整个组件从未主动赋值this.registrations，这个值要么是初始空数组，要么是全局状态缓存的旧数据，根本不包含当前赛事的实时注册信息，二次过滤完全不生效。
• 路由跳转与F5刷新的接口返回差异触发异常
  • F5刷新时整个应用从零初始化，athletes?expand=registrations接口会返回带完整注册关联数据的运动员列表，全局内置的过滤逻辑正常生效，返回的this.athletes本身就是已剔除已注册人员的正确集合，哪怕二次过滤失效，最终显示结果也是符合预期的。
  • 客户端路由跳转属于SPA无刷新切换，很容易出现两类接口异常：
    • 同URL GET请求被前端缓存命中：如果之前在其他页面请求过不带expand=registrations参数的同筛选条件运动员接口，请求被去重后直接返回旧缓存结果，返回的运动员对象根本没有registrations字段；
    • 全局axios拦截器误裁剪参数：expand=registrations参数被拦截器规则过滤，后端返回的列表不带关联注册数据。
      以上两种情况都会导致全局过滤逻辑直接失效——所有运动员的注册列表为空，判断是否已注册的条件永远为真，最终返回全量运动员数组；再叠加组件内二次过滤的依赖缺失，就会出现下拉框加载全部运动员的异常。

• 统一数据来源，删除冗余逻辑
  既然$getUnregisteredAthletes本身已经实现了未注册人员的过滤，直接把模板里绑定的freeAthletes替换为athletes即可，不需要额外基于空值this.registrations写无效的二次过滤方法。
• 调整响应式定义规范
  如果确实需要在组件内做二次校验，把原本写在methods里的freeAthletes逻辑移到computed选项下，明确Vue的响应式依赖追踪，避免方法调用触发的多余无效渲染。
• 补全缺失的依赖赋值
  如果业务规则要求必须基于组件内的实时注册列表做过滤，需要在mounted的异步流程里主动请求当前赛事的注册列表，赋值给this.registrations，不要依赖未初始化的空值。
• 规避接口缓存导致的参数丢失
  给$getUnregisteredAthletes里的请求增加防缓存参数（比如拼接当前时间戳），同时检查全局axios拦截器的参数处理规则，确保expand=registrations参数不会被误裁剪，保证客户端路由跳转时也能拿到完整的关联注册数据。

内容的提问来源于stack exchange，提问作者Franz