Vue.js: Changing background color not working

I'm fetching some content with Axios, looping over an array of objects, and trying to display a few elements with different background colors, but I can't make it work.

This is what I got so far:

     <template>
    <div class="container">
    <div v-for="card in cards" :key="card.id" class="list">
       <div class="card-container" v-if="card.id == 1234 || 1236">
        <div class="card-container" v-bind:style="background">
  </div>
     <div class="card">
     <p class="card-title">{{ card.title }}</p>
     </div>
     <div class="card"> 
     <p class="card-short">{{ card.short }}</p>
     <router-link to="">See more</router-link>
                    </div>
                    </div>
                </div>
            </div>
    </template>

    import axios from 'axios';
    export default {
    name:'Test',
       data(){
        return {
            cards: Object,
            background:{
                backgroundColor:'red'
            }    
        }
    },

What the object looks like

     } "cards":[
    {"id": 1237,"name": "Card 1", bg_color:"green"},
    {"id": 1236,"name": "Card 2", bg_color:"yellow},
    {"id": 1234,"name": "Card 3", bg_color:"red},
    {"id": 1233,"name": "Card 4", bg_color:"blue},
    ] here