Obtengo referencia desde aquí:

https: //bootstrap-vue.js.org/docs/components/card/#card-group

https: //bootstrap-vue.js.org/docs/components/button/#pressed-state-and-togglin

Mi componente vue como este:

<template>
    ...
        <b-card-group deck v-for="row in formattedItems">
            <b-card :title="item.title"
                    img-src="http://placehold.it/140?text=No image"
                    img-alt="Img"
                    img-top
                    v-for="item in row">
                <p class="card-text">
                    {{item.price}}
                </p>
                <p class="card-text">
                    {{item.country}}
                </p>
                <div slot="footer">
                    <b-button-group size="sm">
                        <b-button :pressed.sync="oriPress" variant="outline-primary">Original</b-button>
                        <b-button :pressed.sync="kwPress" variant="outline-primary">Kw</b-button>
                    </b-button-group>
                    <b-btn variant="primary" block>Add</b-btn>
                </div>
            </b-card>
        </b-card-group>
    ....
</template>

<script>
    export default {
        ..
        data () {
            return{
                items: [
                     {id:1, title:'chelsea', price:900, country: 'england'},
                     {id:2, title:'liverpool', price:800, country: 'england'},
                     {id:3, title:'mu', price:700, country: 'england'},
                     {id:4, title:'city', price:600, country: 'england'},
                     {id:5, title:'arsenal', price:500, country: 'england'},
                     {id:6, title:'tottenham', price:400, country: 'england'},
                     {id:7, title:'juventus', price:300, country: 'italy'},
                     {id:8, title:'madrid', price:200, country: 'span'},
                     {id:9, title:'barcelona', price:100, country: 'span'},
                     {id:10, title:'psg', price:50, country: 'france'}
                ],
                oriPress: true,
                kwPress: false
            }
        },
        mounted: function () {
            this.getItems()
        },
        computed: {
            formattedItems() {
                return this.items.reduce((c, n, i) => {
                    if (i % 4 === 0) c.push([]);
                    c[c.length - 1].push(n);
                    return c;
                }, []);
            }
        }
    }
</script>

Si se ejecuta el script, el botón original en todos los cuadros está activo y el botón kw en todos los cuadros está inactivo

Eso es lo que esperaba. Pero mi problema es cuando hago clic en el botón kw o en el botón original, todos los botones están activos o inactivos. Lo quiero activo solo en el botón seleccionado en cada casilla

Por ejemplo, hay 10 cajas de cajas. Cuando hago clic en el botón original en el tercer cuadro, el botón original en el tercer cuadro estará activo y el botón kw estará inactivo. Cuando hago clic en el botón kw en el noveno cuadro, el botón kw en el noveno cuadro estará activo y el botón original estará inactivo. También los demás

¿Cómo puedo hacerlo