Переключение видимости в Vue не работает должным образом

Question

Я работаю над проектом, в котором я получаю данные из веб-сокета и затем анализирую их в соответствующем пользовательском интерфейсе.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь переключить «Компоненты» определенного «Агента», функция «показать / скрыть» работает неправильно.Прямо сейчас у меня есть компонент "AgentsButton", который живет внутри компонента "Config", когда я применил ту же логику в компоненте Config (parent), он работал нормально, но по какой-то причине дочерний компонент не выполняет то, что мне нужносделать.Вот код, который я имею для дочернего ("AgentsButton") компонента.

<template>
  <div>
    <b-row id="agentRow">
      <b-col v-for="agent in agents" md="auto">
        <b-button class="agentButton" @click="compVisible = true">{{ agent.name }}</b-button>

        <b-container v-if="compVisible" id="componentsDiv">
          <h3>Component-Types</h3>
          <div v-for="item in agent.componentTypes">
            <b-row>
              <b-col md="12">
                <b-button type="button" class="componentItem" @click="openModal(item)">
                  {{ item }}
                </b-button>
              </b-col>
            </b-row>
          </div>
        </b-container>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'AgentButtons',
  components: {},
  props: ['agents', 'components'],
  data() {
    return {
      compVisible: false,
    };
  },

  methods: {
    clickEvent() {
      this.$emit('clicked');
      console.log('clickEvent');
    },
    showComponents() {
      this.compVisible = true;
      console.log(`compVisible: ${this.compVisible}`);
    },
  },
};
</script>

Любая помощь по этому вопросу будет принята с благодарностью.Спасибо!