vue 表格中点击表头改变颜色，事件中改变的属性，不能更新到样式上

Question

实现点击表头改变背景颜色，active值改变反馈不到class属性上？怎么修改？

<div class="tableList">

            <table border="" cellspacing="" cellpadding="">

                <tr><th v-for="head in tableHeads" @click="orderBy(head)" :class="{active: head.active}">{{head.label}}</th></tr>

                <tr v-for="item in tableData">

                    <td v-for="head in tableHeads">{{ item[head.key] }}</td>

                </tr>

            </table>

        </div>

    methods :{

            orderBy(headItem){

                this.tableHeads.map((item) =>{

                    item.active = false

                    return item

                })

                headItem.active = true;

            }

        },

    .tableList th.active{

        background: #35495e;

    }