vue3 setting css styles from vuex store

I am trying to update the value of my css property .page with the value from vuex store. I am able to do it via the value of data but not from the computed property.

    <script>
           export default {
            name: 'component',
            components: {
             

   Header,
            Footer
        },
        data(){
            return {
                color: '#f00'
            }
        },
    }
            
</script>
        
   <style>
        
        .page{
             background-color: v-bind(color);
        }
        
   </style>

above works, but below doesn’t.

<script>
   export default {
    name: 'component',
    components: {
        Header,
        Footer
    },
    branding() {
        return this.$store.state.branding.color;
        },
    }
            
 </script>
            
 <style>
            
     .page{
            background-color: v-bind(color);
     }
     

I’ve only got a basic understanding of vue so any help would be much appreciated