Eu obtenho referência a partir daqui:

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

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

Meu componente vue assim:

<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>

Se o script foi executado, o botão original em todas as caixas ativas e o botão kw em todas as caixas inativas

Isso é o que eu esperava. Mas o meu problema é que quando clico no botão kw ou no botão original, todos os botões estão ativos ou inativos. Quero ativá-lo apenas no botão selecionado em cada caixa

Por exemplo, existem 10 caixas de caixa. Quando clico no botão original na terceira caixa, o botão original na terceira caixa fica ativo e o botão kw fica inativo. Quando clico no botão kw na nona caixa, o botão kw na nona caixa estará ativo e o original do botão ficará inativo. Os outros tamb

Como eu posso fazer isso