Prueba como el siguiente fragmento:

 new Vue({ el: "#demo", data() { return { courses: [{id:1, name: 'aaa'}, {id:2, name: 'bbb'},{id:3, name: 'ccc'}], isSelected: null } }, methods: { toggleIcons(id){ this.isSelected === id ? this.isSelected=null : this.isSelected = id } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-for="course in courses" :key="course.id"> <label class="ion-text-wrap">{{ course.name }}</label> <button @click="toggleIcons(course.id)"> click <div v-if="isSelected === course.id " slot="end">1</div> <div v-if="isSelected !== course.id " slot="end">2</div> </button> </div> </div>

Lo mejor que puede hacer es tener una propiedad de datos para mantener el índice (o el course.id en su caso) del botón "alternar"

Y luego @click establece el id del course.id del elemento en el que se hizo clic en la propiedad de datos, después de eso, puede hacer coincidir la propiedad de datos con el course.id del curso y mostrar su icono

Verifique el ejemplo a continuación

Propiedad de datos

 data() { return { selectedCourseId: null, } },

Método para configurar (o puede configurarlo en línea)

 methods: { setSelectedCourseId(id) { this.selectedCourseId = id }, }

Modelo

 <ion-item v-for="course in courses" :key="course.id"> <ion-label class="ion-text-wrap">{{ course.name }}</ion-label> <span @click="toggleIcons"> <ion-icon v-if="selectedCourseId === course.id" :icon="ellipseOutline" slot="end"></ion-icon> <ion-icon v-else :icon="checkmarkCircleOutline" slot="end"></ion-icon> </span> </ion-item>