I can't change text color by using conditional formatting in Flexmonster

I can't change text color by using conditional formatting (shown in flexmonster_conditional_formatting.png) in Flexmonster. The Flexmonster version is (v. 2.9.5).
 
It container two files those are shown at below.

1. CustomStatic.vue 

<template >
  <div id="vue">
    <Pivot
        ref="pivotContainer"
        height="800px"
       
        v-bind:report="{
       
        dataSource: {
            data: testData
        }
        }"
       
        v-bind:licenseKey="flexmonsterKey">
    </Pivot>
    </div>
</template>

<script>
import Pivot from "../components/Pivot"
export default {
    name: 'App',
    flexmonsterKey: null,
    components: {
      Pivot
    },
    props: ['iData'],
   
    data: () => ({
        testData:[{    
        "Color" : "green","Country" : "Canada","State" : "Ontario","City" : "Toronto","Price" : 174,"Quantity" : 22
        },
        {
        "Color" : "red","Country" : "USA","State" : "California","City" : "Los Angeles","Price" : 166,"Quantity" : 19
        }],
        iData: null,
        vData: null,
        firstToLoad: true
    }),
    created(){
         //Get Flexmonster licence key
         this.flexmonsterKey = "please input the key here";
    },
  }
</script>
 

     2. Pivot.vue (Component page)

<!--HTML related information for displaying the component-->
<template>
  <div>Pivot</div>
</template>

<!--JavaScript related information for the component's logic-->
<script>
import Flexmonster from "flexmonster";
export default {
  name: "Pivot",
  props: {
    afterchartdraw: Function,
    aftergriddraw: Function,
    beforegriddraw: Function,
    cellclick: Function,
    celldoubleclick: Function,
    componentFolder: String,
    customizeAPIRequest: Function,
    customizeChartElement: Function,
    customizeContextMenu: Function,
    datachanged: Function,
    dataerror: Function,
    datafilecancelled: Function,
    dataloaded: Function,
    drillthroughclose: Function,
    drillthroughopen: Function,
    fieldslistclose: Function,
    fieldslistopen: Function,
    filterclose: Function,
    filteropen: Function,
    fullscreen: Function,
    global: Object,
    height: [String, Number],
    licenseKey: String,
    licenseFilePath: String,
    loadingdata: Function,
    loadinglocalization: Function,
    loadingolapstructure: Function,
    loadingreportfile: Function,
    localizationerror: Function,
    localizationloaded: Function,
    olapstructureerror: Function,
    olapstructureloaded: Function,
    openingreportfile: Function,
    querycomplete: Function,
    queryerror: Function,
    ready: Function,
    report: [String, Object],
    reportchange: Function,
    reportcomplete: Function,
    reportfilecancelled: Function,
    reportfileerror: Function,
    reportfileloaded: Function,
    runningquery: Function,
    unauthorizederror: Function,
    update: Function,
    width: [Number, String],
    accessibility: Object
  },
  mounted: function() {
    this.flexmonster = new Flexmonster({
      toolbar: true,
      beforetoolbarcreated: this.customizeToolbar,
      customizeCell: this.customizeCellFunction,
      ...this.$props,
      container: this.$el
     
    });
    flexmonster.on("reportcomplete", this.adjustTableSizes);
  },
  beforeUpdate() {
    return false;
  },
  methods:{

    customizeToolbar(toolbar) {
        let tabs = toolbar.getTabs();
        toolbar.getTabs = function() {
          tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
         
          let openTab = tabs.find(tab => tab.id == "fm-tab-open");
          let menuItem = openTab.menu[0];
          openTab.menu.shift(1);
          openTab.menu.shift(0);
          openTab.menu.unshift(menuItem);
          /*
          openTab.menu.unshift({  
            id: "fm-tab-newtab",
            title: "Refresh Data",
            handler: function() {
              newtabHandler();
            } ,  
            icon: this.icons.open
          });
          let newtabHandler = function() {
            // add new functionality
            console.log("Test2", "Test event");
            this.$root.$emit('LoadData_Flexmonster');
          }
          */
          return tabs;
        }
    },
    customizeCellFunction(cell, data) {
     
      if (data.type == "header"){
        cell.text = "<span class='tooltip' title='" + data.label + "'>" + cell.text.replace(' – ', ' <br/>') + "</span>";
         
      }
      else
      {
        if (data.type == "value")
        {
          //cell.text = "<span class='tooltip' style='overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap !important;'  title='" + data.label + "'>" + cell.text + "</span>";
          //cell.text = "<span class='tooltip' title='" + data.label + "'>" + cell.text + "</span>";
          cell.text = "<span title='" + data.label + "'>" + cell.text + "</span>";
          cell.addClass("tooltip");
        }
       
      }
     
    },
    adjustTableSizes() {
      let cells = document.querySelectorAll(".fm-cell");
      let highCells = [...cells].filter(cell => cell.clientHeight < cell.scrollHeight);
      let tableSizes = {
        rows: [],
        columns: []
      };
      highCells.forEach(cell => {
        tableSizes.rows.push({
          idx: +cell.getAttribute("data-r"),
          height: cell.scrollHeight
        });
        tableSizes.columns.push({
          idx: +cell.getAttribute("data-c"),
          width: cell.clientWidth
        });
      });
      flexmonster.setTableSizes(tableSizes);
    }
       

  }
 
};
</script>

<!-- Apply CSS directly -->
<style>