vue js - conditional styling is not working

I have a heart symbol attached with a submit button that upon clicking it, the color should changed.

My code:

 <template>
    
     <button v-bind:class="classes" type="submit" @click="toggle">
            <span v-text="this.count"></span>
            <i class="fas fa-heart fa-sm" v-bind:style="styleObject"></i>
    </button>
        
    </template>
    
    
    <script>
    export default {
        props: ['reply'],
    
        data(){
            return {
                isFavorited: this.reply.isFavorited,
                count: this.reply.favorites_count
            }
        },
    
        computed: {
            classes(){
                return ['btn',this.isFavorited ? 'btn-primary':'btn-secondary'];
            },
            styleObject(){
                return this.isFavorited ? 'color:red':'color:white';
            } 
        },
    .......
methods: {
        toggle(){
            // check if reply is favorited
            if(this.isFavorited){
                axios.delete('/replies/'+this.reply.id+'/favorites');
                this.isFavorited = false;
                this.count--;
            }else{
                 axios.post('/replies/'+this.reply.id+'/favorites');
                this.isFavorited = true;
                this.count++;
            }
        }
    }  

So I bind the icon to styleObject and upon clicking the button, the color is not changing unless I refresh the page.The class button however is working as expected.

I also tried writing it like this using inline style binding:

 <span class="fas fa-heart fa-sm" v-bind:style="[this.isFavorited ? {'color' : 'red'} : {'color' : 'white'}]"></span>

and also this way:

 styleObject(){
             return { color: this.isFavorited ? 'red' : 'white' };
        } 

I tried inspect it using vue dev tool and it does show the color has changed upon clicking but it's not reflecting on my screen.

How do I fix this?