vant中的title-active-color与title-inactive-color不生效问题

今天刚学vant 然后就遇到了 title切换加入后不生效了 太难了

问题代码

 <van-tabs 
 	v-model="active" 
	scrollspy sticky 
	background="#f8f8f8" 
	color="#bc7e3c" 
	title-active-color="#bc7e3c"
	title-inactive-color="#bc7e3c">
            <van-tab title="案例">下边内容</van-tab>
            <van-tab title="案例">下边内容</van-tab>
            <van-tab title="案例">下边内容</van-tab>
 </van-tabs>

export default{
    data(){
        return{
            active:0
        }
    }
}

这个时候 我就出现了 title-active-color与title-inactive-color 不生效问题 具体原因没找到 但是找到了 解决方法 具体方法如下:

 <van-tabs 
 	v-model="active" 
	scrollspy sticky 
	background="#f8f8f8" 
	color="#bc7e3c" 
	title-active-color="#bc7e3c"
	title-inactive-color="#bc7e3c">
            <van-tab>
            	<template #title >
                        <span :style="active===0?'color:#bc7e3c':'color:#333'" >
                        案例1
                        </span>
                    </template>
            </van-tab>
            <van-tab>
            	<template #title >
                        <span :style="active===1?'color:#bc7e3c':'color:#333'" >
                        案例2
                        </span>
                    </template>
			</van-tab>
            <van-tab>
            	<template #title >
                        <span :style="active===2?'color:#bc7e3c':'color:#333'" >
                        案例3
                        </span>
                    </template>
            </van-tab>
 </van-tabs>

利用title插槽，用active的状态来更改title内容的样式，下面的线还是用官方文档的color来更改颜色。