Николай

https://css-shape.com/inverted-radius/
Оставлю тут )

не совсем понятно
1- Если у вас слайдер, именно идет скролл, то, выбираете сдвиг первого изображения на 50% , визуально видно, что там так и есть
2- Если это статично, делаете сетку, грид, размечая, сколько у вас колонок и по высоте и по ширине, у первой колонки и последней, можете сделать сдвиг, тогда, пересчет будет как вам нужно.

Но, вопрос требует уточнений, что именно вы хотите, что за изображения, нужно, чтобы они были оазличными, или же, это просто одно изображение, в виде картинки, которое повторяется с учетом строк ?

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```