Javascript 使用JS过滤VUE渲染数据

我刚刚开始了一个新项目，VueJS作为前端，CakePHP作为后端。我的“开发人员”时代可以追溯到很久以前，所以我现在对各种各样的框架和技术（选择和理解）非常迷茫

说到这里，我从前端VUE获得一个JSON，然后在表中使用v-for进行迭代。此表使用List.js执行一些排序

HTML代码：

    <table class="table table-sm table-hover table-nowrap card-table">
       <thead>
         <tr>
          <th><a class="list-sort text-muted" data-sort="item-name" href="#">Nombre</a></th>
         </tr>
       </thead>
       <tbody class="list font-size-base" id="userList">
         <tr v-for="userItem in userAll">
           <td><span class="item-name">{{ userItem.username }}</span></td>
         </tr>
       </tbody>
    </table>

代码正常工作（即用户列表正确显示在表中），但我无法使表顺序功能正常工作。现在我知道List.js只看到“{userItem.user_department}}”，而不是用户看到的值（抱歉，技术上不太准确）

我可能可以使用本机Vue过滤功能，但我担心这会再次发生在其他一些JS插件/组件上，我无法用Vue轻松替换这些插件/组件。有没有一种更简单的方法可以让它在不放弃所有JS功能的情况下工作？（我相当迷茫，但我不知道SSR是否是一个更干净的解决方案，或者我只是指向了错误的方向）

多谢各位

---

编辑：我添加完整的表格。

什么是list.js？这些表格标题在哪里？为什么会涉及主题开发人员？我问主题开发人员，她告诉我她使用List.js进行排序。就在前面的代码之前：

当与静态html一起使用时，它确实可以工作。但是当与Vue mustache标记一起使用时，List.js看到的只是Vue mustache标记，而不是v-for动态获取的数据。我使用第三方主题是因为我想简化样式，我可以专注于学习Vue，CakePHP.List.js来自listjs.com。这是一种添加订单功能的普通javascript。该表如下所示：

{{userItem.username}

      el: "#userList",
      data: function () {
        return {
          userAll: []
        }
      },
      beforeMount(){
        this.getUsers();
      },
      methods: {
        async getUsers(){
          const res = await fetch('http://localhost/users/index.json');
          const salida = await res.json();
          this.userAll = salida;
        }
      }
    });