Родитель всегда общий? Если да, тогда добавьте в него свойство, которое будет указывать, в каком из экземпляров вашего компонента надо отображать дополнительные элементы. В качестве значения можно использовать индекс экземпляра, например (не обязательно, также подойдёт какое-нибудь свойство из объектов с данными, на основе которых создаются экземпляры компонента - главное, чтобы значения были уникальными, типа id):
data: () => ({
items: [ ... ],
active: null,
}),
<v-xxx
v-for="(n, i) in items"
:показыватьДополнительныйКонтент="active === i"
@переключитьОтображениеДополнительногоКонтента="active = active === i ? null : i"
...
https://jsfiddle.net/kdg4qevp/
В противном случае создайте наблюдаемый объект, и поместите свойство, указывающее кого отображать, в него:
const xxx = Vue.observable({ active: null });
В свой компонент добавьте вычисляемое свойство, значение которого а) определяет необходимость демонстрации дополнительных элементов; б) зависит от свойства наблюдаемого объекта:
computed: {
показыватьДополнительныйКонтент() {
return xxx.active === this.какоеТоСвойствоСУникальнымЗначением;
},
},
<div v-if="показыватьДополнительныйКонтент">
...
</div>
Также добавьте в свой компонент метод для переключения отображения дополнительного содержимого:
methods: {
переключитьОтображениеДополнительногоКонтента() {
xxx.active = this.показыватьДополнительныйКонтент
? null
: this.какоеТоСвойствоСУникальнымЗначением;
},
},
<button @click="переключитьОтображениеДополнительногоКонтента">
{{ показыватьДополнительныйКонтент ? 'hide' : 'show' }}
</button>
https://jsfiddle.net/kdg4qevp/1/