Recurisve components select active aelement

I made a recursive component in vue that shows a tree structure.I’m trying to add an active class to the element that is clicked but I can’t reset the selection when I click a new element.

This is the father component

<div class="tree-menu-links">
       <ul class="tree-menu-links">
          <tree-menu
          :label="PP.tree.label"
          :nodes="PP.tree.nodes"
          :depth="0"
          :expand-all="expandAll"
          :selected="PP.tree.selected"
          @reset-selection="resetSelection"
      ></tree-menu>
   </ul>
</div>

and this is the Tree-Menu component

<template>
  <li>
    <ul class="tree-ul">
      <div
        @click="toggleChildren"
        :class="{ 'tree-item': true, active: selectedElement }"
      >
        <!-- <div :style="indent" @click="toggleChildren" class="tree-item"></div> -->
        <v-icon
          class="tree-icon"
          v-if="nodes"
          :icon="
            !showChildren && !expandAll
              ? 'mdi-plus-circle-outline'
              : 'mdi-minus-circle-outline'
          "
        ></v-icon>

        <div>
          <span
            @click="selectElement(nodes)"
            class="tree-span"
            :style="[{ color }, showChildren ? { fontWeight: 'bold' } : {}]"
            >{{ label }}</span
          >
        </div>
        <!-- <span
          class="tree-span"
          :style="[{ color }, showChildren ? { fontWeight: 'bold' } : {}]"
          >{{ label }}</span
        > -->
      </div>

      <tree-menu
        v-if="showChildren || expandAll"
        v-for="(node, index) in nodes"
        :index="index"
        :key="node.label"
        :nodes="node.nodes"
        :label="node.label"
        :color="node.color"
        :depth="depth + 1"
        :expand-all="expandAll"
        :selected="node.selected"
        @reset-selection="resetSelection"
      ></tree-menu>
    </ul>
  </li>
</template>

<script setup>

const props = defineProps({
  label: String,
  color: String,
  nodes: Array,
  index: Number,
  depth: {
    type: Number,
    default: 0,
  },
  expandAll: Boolean,
  selected: Boolean,
});

const checkedNodes = ref(props.nodes);
const selectedElement = ref(props.selected);

const resetSelection = (nodes) => {
  selectedElement.value = false;
  checkedNodes.value.forEach((node) => {
    node.selected = false;
  });
};

function toggleChildren() {
  showChildren.value = !showChildren.value;
  //selectedElement.value = !selectedElement.value;
  emit("reset-selection");
}

Any idea?

I tried using emit to pass the result of the reset selection method but the previous element is not resetting