Vue не может изменить атрибут во вложенном v-for

Я получаю массив объектов и добавляю к нему атрибут clicked=false, чтобы позже можно было добавить или удалить класс, используя vue bind и значение этого атрибута.

Затем я превращаю этот массив объектов в объектную структуру, чтобы я мог отображать элементы по типу при визуализации цикла.

Я использую метод щелчка для каждого элемента списка, чтобы изменить атрибут clicked, но он никогда не меняется.

Как я могу это сделать?

Объект имеет такую ​​структуру

grouped:{
  typeA: [
   {
    clicked: false,
    text: "a1",
    type: "typeA"
   }, 
   {
    clicked: false,
    text: "a2",
    type: "typeA"
   }
  ],
  typeB: [
   {
    clicked: false,
    text: "b1",
    type: "typeB"
   }
  ]
}

А затем для рендеринга по типу делаю

  <div v-for="(group, type) in grouped" :key="type">
    <b>{{type}}</b>
    <div  v-for="(item, index) in group" :key="index" @click="eventItemClick(item)" >
      {{item.text}}   {{item.clicked}}
    </div>
  </div> 

все, что делает метод eventItemClick, это

      eventItemClick(item){    
        item.clicked = !item.clicked;
      },
           

Я создал простой пример скрипта js, который демонстрирует. Просто не забудьте нажать кнопку group, чтобы сгруппировать массив и отобразить список.

Спасибо