Николай

justify-items - выравнивает элементы внутри их ячеек
justify-content - выравнивает всю сетку по горизонтали

Вот ссылка
https://doka.guide/css/grid-guide/

Либо вы как-то не так задали вопрос, либо покажите полный код, что вы хотите.

Проблема в том, что вам нужно отслеживать состояние конкретной кнопки, а не только предыдущий массив.

Примерно, как-то так будет

data() {
  return {
    activeItems: [],
    lastClickedId: null
  }
},

methods: {
  click(items, buttonId) {
    const itemsArray = Array.isArray(items) ? items : [items];
    
    // Если кликаем второй раз по той же кнопке
    if (this.lastClickedId === buttonId) {
      this.activeItems = [];
      this.lastClickedId = null;
    } else {
      this.activeItems = itemsArray;
      this.lastClickedId = buttonId;
    }
    
    this.applyStyles();
  },
  
  applyStyles() {
    for (let node in this.nodes) {
      this.nodes[node].style.opacity = this.activeItems.includes(node) ? 1 : 0.3;
    }
  }
}



В коде при событии клик, передавай и id   @click="click(button.items, button.id)" - который как раз является индексом

Есть события жизненный цикл у компонента, однако, явного иструмента , который следи за props нет, они по умолчанию реактивны.
Если вам надо явно отследить изменения именно пропсов, предполагаю, у вас там вложенный объект, то вам нужен watch с опцией immediate, и вы явно можете отследить изменения и сделать что-то с ними, так как, не всегда изменения пропсов, затрагивают изменение обновления компонента и его перерисовку

Проблема в том, что все fetch запросы запускаются параллельно, и filePosition вычисляется до того, как предыдущие файлы успевают добавиться в массив. Вот несколько способов решения:

// В дочернем компоненте - передаем все файлы сразу
attachThumbnail: function (e, curObj) {
  e.target.closest('.area-upload').classList.remove('drag-file');
  e.target.closest('.area-upload').style.display = 'flex';

  let files = e.target.files || e.dataTransfer.files;
  let allowFiles = this.validateFiles(e, files, curObj);

  this.$emit('attachThumbnail', curObj, Array.from(allowFiles));
},

// В родительском компоненте - обрабатываем последовательно
async attachThumbnail(curObj, files) {
  let index = this.formData.materialFiles.findIndex(item => item.lang === curObj.lang);
  
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let filePosition = this.formData.materialFiles[index].files.restFiles.length;

    console.log('Array length ' + filePosition);

    try {
      const response = await this.uploadFile(curObj, file, 'rest', filePosition);
      const data = await response.json();
      
      console.log('append file');
      this.formData.materialFiles[index].files.restFiles.push({
        name: data.fileName,
        id: data.id
      });
    } catch (error) {
      console.log(error);
    }
  }
}

Примерно как-то так

Кажется я понял о чем вы.
Так обычно делают для того, чтобы сравнить, были ли изменения в форме и показать окно выхода.

Судя по всему, у вас 2vue.
На моменте инициализации, что мешает вам скопировать объект, сохранить его исходные данные и написать метод useCompare, который как раз, будет через cloneDeep сравнивать оригинал с тем, что было изменено.

Далее, на вотчкер смотрит за стейтом и сравнивает с оригиналом скопированным.
Скорее всего, у вас комирование идет по ссылке и значения у вас идентичные.

Но, если объект слишком глубокой вложенности, то, кажется, вы что-то делаете не так,

Вы пересоздавали индексы , после того, как копировали ?
Убедитесь, что привязки в новом разделе не ведут на старые ИБ

А что мешает вам вывести компонент и указать у него количество ?
У вас все эти компоненты лежат в index.php

Хмм, а что мешает тебе подставить в эту иконку какой-то слой, типа

А дальше, слушателем на позицию мышки делать подсветку при наведении, радиус ты можешь вычислить сам.
Пришли всю иконку или сделай ссылку, так непонятно, что ты хочешь. Соседние точки , ты можешь вычислить по
https://developer.mozilla.org/en-US/docs/Web/API/S...

Пример определения
function getMousePosition(evt) {
      const CTM = svg.getScreenCTM();
      return {
        x: (evt.clientX - CTM.e) / CTM.a,
        y: (evt.clientY - CTM.f) / CTM.d
      };
    }

Рекомендую рассмотреть библиотеку Interval

Вот по таймеру
Time out

библиотека очень мощная и много чего уже сделано

Как вариант, ранее на PHP делали следующее, при рендере страницы, можно создать некий атрибут и туда класть данные, и потом с ним работать, такой подход делал Bitrix в свое время, чтобы передать данных из сервера в js

Судя по этой ссылке
Там говорится, что , внутри компонента vue надо использовать
$q.platform.is.cordova

Usage inside a Vue component JS:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.platform.is.mobile
}

Usage inside a Vue component template:
$q.platform.is.cordova

You must import it when you use it outside of a Vue component :
import { Platform } from 'quasar'

Суть в том, что , асинхронный компонент подгрузится тогда, когда будет выполнено условие и изначально бандл будет меньше.
Статичный - у тебя компонент сразу будет в сборке, и не важно, будет ли условие использовано или нет.

Когда это может выстрелить в ногу-
Предположим, у тебя есть модальное окно, в нем у тебя через defineAsync грузится иконка, как компонент, так вот, при открытии первого раза, у тебя будет эффект мерцания, потому что, компонент загрузился и остался.
Как лучше использовать ? ну, тут все от задачи зависит.

Тут либо тебе поможет Watch, либо guard в РОутере

1-

<script setup>
import { useRouter } from 'vue-router';
import { computed, watch } from 'vue';
import { useAuthStore } from '@/stores/auth'; // Пример с Pinia

const router = useRouter();
const authStore = useAuthStore();
const userRole = computed(() => authStore.role);

watch(userRole, (newRole) => {
    if (newRole !== 'admin') {
        router.push('/'); 
    }
});
</script>

Тут проверка, перед переходом

router.beforeEach((to, from, next) => {
    const hasAccess = checkUserAccess(to); 
    if (!hasAccess) {
        next('/'); 
    } else {
        next();
    }
});

Я бы вам посоветовал использовать nuxt, как раз, решение для того, что вы хотите, ssr + vue3

Что-то глянул код , у вас стоит вотч на эмит, но сам эмит не увидел, что он обрабатывается.
В выводе компонента , вы выводите props, а меняете через switch данные в компоненте, как только вы соедините все через emit, у вас реактивность пропса будет работать.
Можно пойти дальше, и написать компонент, который будет принимать как раз 2 v-model, и не нужно будет прокидывать пропсы, вы тем самым уменьшите 1 уровень проброса emit
По сути, у вас на нижнем уровне данные поменялись, а родитель не увидел.
Вам надо обработать эмит и тогда даные у пользователя обновятся
Еще уберите вотч, если у вас можно изменение обработать по ```@change```

Вроде все верно,
Вызываете fetchProducts внутри по клику sendData, либо прям по клику можно сразу вызвать fetchProducts и передать туда вашу строку

Если правильно вас понял, то есть несколько вариантов
1- Самый очевидный
в дочерний компонент значение получается в виде props от родителя. В дочернем компоненте делаете emit и в родителе подписываетесь на изменение пропса по этому эмиту, итого у вас 1 переменная у родителя, но вы в дочернем компоненте посылаете событие на изменение
2- Через ref, получаете инстанс компонента и можете сделать там изменение, через какой-то метод, который будет возвращать вам true/false состояния
3- Стор

Но , это все избыточно, верное и правильное решение под 1 пунктом

Вопрос, а зачем вы напрямую удаляете из стора ? Опиши для начала что вы хотите сделать, и зачем вам хранить в localStorage целый стейт ?
Если хотите проверять авторизован или нет, то кладите токен, для этого не надо целую библиотеку тянуть