weird behaviour when expanding component

<template>
  <div class="category-box" @click="toggleExpand">
    <div class="header">
      <span class="icon">{{ expanded ? '-' : '+' }}</span>
      <span class="title">{{ title }}</span>
    </div>
    <div v-if="expanded" class="subcategories">
      <ul>
        <li v-for="(subcategory, index) in subcategories" :key="index">{{ subcategory }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    subcategories: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    toggleExpand() {
      this.expanded = !this.expanded;
    }
  }
};
</script>

<template>
  <div class="category-container">
    <GeneralCategory
      v-for="(category, index) in categories"
      :key="index"
      :title="category.title"
      :subcategories="category.subcategories"
    />
  </div>
</template>
<style lang="scss">
.category-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>