使用vue动态切换属性不生效

我给日历组件添加动态class样式：

<template slot="dateCell" slot-scope="{date, data}">
  <p
     @click="change(data)"
      :class="{ 'redbgc':tradeDayList[data.day].isred,'greenbgc':tradeDayList[data.day].isgreen }"
  >
    {{ data.day.split('-').slice(1).join('-') }}
 </p>
</template>

上面代码中的redbgc和greenbgc是设置背景色红色或绿色的class，后面的tradeDayList是个key-value的形式，类似于：

const tradeDayList={
        '2019-01-01':{
          isred: 0,
          isgreen: 0,
        },
        '2019-01-02':{
          isred: 0,
          isgreen: 1,
        },
}

tradeDayList一开始所有的元素的isred和isgreen都是0，后来由点击事件触发change方法，改变对应的元素的isred和isgreen属性。
此时，页面上的样式并不会动态切换，而且浏览器控制台上的vue实例也没有动态的监听到tradeDayList内元素属性的变化，因此我让每次点击事件结束后，调用this.$forceUpdate()方法，强制重新渲染，此时浏览器控制台能动态的监听到tradeDayList内元素属性的变化了，但是页面上的元素样式依然没有发生变化。求解

https://blog.csdn.net/weixin_30640769/article/details/96157078

可以了解下Vue数据双向绑定的原理，在V2.X版本，数据双向绑定是通过Object.defineProperty()数据劫持去做的，而list是一个数组对象，没有直接的Object.defineProperty()，需要通过for循环来处理，而你只改变里面对象的一个属性是没办法触发数据劫持的，需要手动更新下，官方有个Vue.set()用来更新数组对象的

tradeDayList为什么不放在data(){return{}}里面