Cómo resolver Interpolación dentro de atributos ha sido eliminado. ¿Usar v-bind o la taquigrafía del colon? Vue.JS 2

Mi componente vue es así:

<template>
    <div>
        <div class="panel-group" v-for="item in list">
            ...
            <div class="panel-body">
                <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
                    Show
                </a>
            </div>
            <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
            ...
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

Cuando se ejecuta, existe un error como este:

Error de sintaxis de la plantilla Vue:

Id = " compra - {{ item.id }}": Interpolación dentro de atributos tiene ha sido removido. Use v-bind o la abreviatura de dos puntos en su lugar.

¿Cómo puedo resolverlo?