0xD34F

Пытаюсь так:

let currentIndex = $(".js-practice_button.current").index();

Но значение всегда 0, у какой бы кнопки класс current не присутствовал.

Потому что метод index по умолчанию определяет индекс элемента среди соседей, а так как у каждой кнопки есть отдельный родитель... Ну да, получаете то, что получаете.

Можно вместо индекса кнопки определять индекс родителя:

const index = $('.js-practice_button.current').closest('li').index();

Или, если указать методу index в качестве параметра селектор, то индекс будет определятся не среди соседей, а среди элементов, соответствующих селектору:

const index = $('.js-practice_button.current').index('.js-practice_button');

А вообще, к чёрту jquery. Есть варианты и на чистом js:

const container = document.querySelector('.js-practices_buttons');
const itemSelector = '.practice_item';
const buttonSelector = `${itemSelector} .js-practice_button`;
const activeClass = 'current';
const activeSelector = `.${activeClass}`;

const index = Array.prototype.findIndex.call(
  container.querySelectorAll(buttonSelector),
  n => n.classList.contains(activeClass)
);

// или

const { children } = container;
let index = children.length;
while (index-- && !children[index].matches(`:has(${activeSelector})`)) ;

// или

const index =
  (el => el ? [...el.parentNode.children].indexOf(el) : -1)
  (container.querySelector(`${itemSelector}:has(${activeSelector})`));

// или

let index = -1;
for (
  let el = container.querySelector(activeSelector)?.closest(itemSelector);
  el;
  el = el.previousElementSibling, index++
) ;

Прежде чем браться за целый массив, разберёмся с одним числом. Есть разные способы узнать, все ли цифры в числе (правильно понимаю, что речь идёт о целых неотрицательных? - других-то вы не показали) являются уникальными, как относительно вменяемые, так и вполне дикие:

const noRepeatingDigits = num => !/(\d).*\1/.test(num);

// или

const noRepeatingDigits = num => -~Math.log10(num) === new Set(`${num}`).size;

// или

const noRepeatingDigits = num => [...'' + num].every((n, i, a) => i === a.indexOf(n));

// или

const noRepeatingDigits = num => String(num)
  .split('')
  .reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
  .every(n => n < 2);

// или

const noRepeatingDigits = num =>
  !''.match.call(num, /./g).some(function(n) {
    return this[n] = Object.hasOwn(this, n);
  }, {});

// или

const noRepeatingDigits = num =>
  !Array.from(num.toString()).sort().find((n, i, a) => n === a[i + 1]);

Теперь массив. Можно удалить ненужное из существующего:

arr.splice(0, arr.length, ...arr.filter(noRepeatingDigits));

// или

let numDeleted = 0;

for (const [ i, n ] of arr.entries()) {
  arr[i - numDeleted] = n;
  numDeleted += !noRepeatingDigits(n);
}

arr.length -= numDeleted;

// или

for (let i = arr.length; i--;) {
  if (!noRepeatingDigits(arr[i])) {
    arr.splice(i, 1);
  }
}

Или собрать новый:

const newArr = arr.filter(noRepeatingDigits);

// или

const newArr = [];

for (const n of arr) {
  if (noRepeatingDigits(n)) {
    newArr.push(n);
  }
}

// или

const newArr = [];

for (let i = 0; i < arr.length; i++) {
  if (noRepeatingDigits(arr[i])) {
    newArr[newArr.length] = arr[i];
  }
}

// или

const newArr = (function xxx(arr, i = 0) {
  return i < arr.length
    ? (noRepeatingDigits(arr[i]) ? [ arr[i] ] : []).concat(xxx(arr, i + 1))
    : [];
})(arr);

Кого надо объединить:

const arrs = [
  [ 1, 2, 3, 4 ],
  [ 5, 6, 7, 8 ],
  [ 9, 10, 11 ],
];

Объединяем:

const result = [];
const max = Math.max(...arrs.map(n => n.length));
const index = Array(arrs.length).fill(0);

for (let i = 0; i < max; i++) {
  for (let j = 0; j < index.length; j++) {
    if (index[j] < arrs[j].length) {
      result[result.length] = arrs[j][index[j]++];
    }
  }
}

или

const result = arrs
  .reduce((acc, arr) => (
    arr.forEach((n, i) => (acc[i] ??= []).push(n)),
    acc
  ), [])
  .flat();

const li = Array.prototype.filter.call(
  document.querySelector('ul').children,
  function(n) {
    return this.every(([ k, v ]) => v === n.querySelector(`.${k}`).innerText);
  },
  Object.entries(items)
);

или

const li = [];

COLLECT_LI:
for (const n of document.querySelectorAll('li')) {
  for (const k in items) {
    if (Object.hasOwn(items, k) && items[k] !== n.querySelector('.' + k).textContent) {
      continue COLLECT_LI;
    }
  }

  li.push(n);
}

Не выдумывайте, всё рендерится.

Почему видимых изменений нет? Потому что обновляете одно состояние, а рендер выполняете на основе другого, items в App и items в ElementsList - это разные массивы. Не надо никакого useState в ElementList, выполняйте рендер на основе prop'а; метод onDelete перенесите в App и тоже передавайте в ElementList через props.

Для vue 3 предназначена четвёртая версия роутера, а не третья:

- <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
+ <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

А вот это надо вырезать:

import VueRouter from 'vue-router'

Подписаться на события инициализации карты и изменения её границ. Получить границы видимой области карты. Перебрать массив данных, на основе которых создаются маркеры, проверяя, как координаты маркеров соотносятся с границами видимой области. Как-то так:

<yandex-map
  ref="map"
  @map-was-initialized="onBoundsChange"
  @boundschange="onBoundsChange"
  ...
>
  <ymap-marker
    v-for="n in markersData"
    ...
  >

methods: {
  onBoundsChange() {
    const bounds = this.$refs.map.myMap.getBounds();
    this.markersData.forEach(n => {
      if (
        bounds[0][0] < n.coords[0] && n.coords[0] < bounds[1][0] &&
        bounds[0][1] < n.coords[1] && n.coords[1] < bounds[1][1]
      ) {
        // ...
      }
    });
  },
  ...

$extract = fn($keys, $item) => array_combine($keys, array_map(fn($k) => $item[$k], $keys));

$grouped = [];
$productKeys = [ 'product_id', 'sku', 'quantity' ];
$orderKeys = array_diff(array_keys($arr[0] ?? []), $productKeys);

foreach ($arr as $n) {
  $id = $n['order_id'];
  $grouped[$id] ??= $extract($orderKeys, $n);
  $grouped[$id]['products'][] = $extract($productKeys, $n);
}

Всё получается, всё передаётся.

метод testemit компонента question не отрабатывает

А должен? Нет, не должен - вы его нигде не вызываете. Как и не используете в качестве обработчика событий - вижу, что $emit('testemit') есть, а вот @testemit="testemit" отсутствует.

Поиск тут сильно так себе, так что искать лучше через гугл. Лично я использую запрос следующего вида:

site:qna.habr.com <имя-пользователя> <тег> <чего ищем>

Отобрать вопросы/ответы - подписываетесь на интересующие вас теги, заходите в профиль, раздел "подписки", подраздел "теги", появится список тегов - рядом с каждым будут ссылки на списки соответствующих вопросов и ответов (конечно, если таковые у вас есть). Но, разумеется, можно и напрямую пройти, если знать, как нужный url выглядит. Вот ваш laravel, например.

Зайдите с другой стороны - вместо удаления того, чего больше нет, получите то, что есть, и замените массив:

tags = Array.from(new Set(data.flatMap(n => n.tags)));

Если массив по какой-то причине заменять нельзя, тогда удалите все элементы из существующего и запишите новые:

tags.splice(0, tags.length, ...new Set(data.flatMap(n => n.tags)));

Сделать observable объект, содержащий ссылку на экземпляр компонента, в котором последний раз осуществлялся пользовательский ввод. Установить наблюдение за этой ссылкой, и если значение не совпадает с текущим экземпляром - сбрасывать значение input'а:

const lastEdited = Vue.observable({ instance: null });

props: [ 'value' ],
methods: {
  onInput(e) {
    this.$emit('input', e.target.value);
    lastEdited.instance = this;
  },
},
created() {
  this.$watch(() => lastEdited.instance, val => {
    if (val && val !== this) {
      this.$emit('input', '');
    }
  });
},
beforeDestroy() {
  if (lastEdited.instance === this) {
    lastEdited.instance = null;
  }
},

<input :value="value" @input="onInput">

https://jsfiddle.net/jLw096zm/

Или можно шину событий применить. Если случилось изменение input'а пользователем, кидать событие, в качестве аргумента передавать ссылку на экземпляр компонента, в обработчике сравнивать значение аргумента и this, если не совпали - очищать input:

const eventBus = new Vue();

props: [ 'value' ],
methods: {
  onInput(e) {
    this.$emit('input', e.target.value);
    eventBus.$emit('clear-other-inputs', this);
  },
},
created() {
  const clear = e => e !== this && this.$emit('input', '');
  eventBus.$on('clear-other-inputs', clear);
  this.$on('hook:beforeDestroy', () => eventBus.$off('clear-other-inputs', clear));
},

<input :value="value" @input="onInput">

https://jsfiddle.net/jLw096zm/1/

имеется pinia такого вида
<...>
export const useSearchStore = () => {

Ну и где тут Pinia? Где вызов defineStore?

const { search, updateSearchQuery } = useSearchStore();

Так нельзя:

Note that store is an object wrapped with reactive, meaning there is no need to write .value after getters but, like props in setup, we cannot destructure it

Вы вообще как, документацию пробовали открывать?

Исправляем:

Стор:

const useSearchStore = defineStore('search', () => {
  const search = ref('');
  const setSearch = val => search.value = val;
  return { search, setSearch };
});

Компонент search input:

const searchStore = useSearchStore();
const search = computed({
  get: () => searchStore.search,
  set: searchStore.setSearch,
});

<input v-model.trim="search">

Компонент search:

Не надо слушать никаких событий из search input, не надо трогать стор, уберите это всё отсюда.

Корневой компонент:

const searchStore = useSearchStore(); 
watch(() => searchStore.search, val => console.log(val));

Никак не использовать. Хотите тут computed - вместо одного значения пусть предоставляет массив:

const names = computed(() => list.map(n => (n.main ?? n.default).name));

<div v-for="n in names">
  {{ n }}
</div>

Асинхронная функция, внутри цикл:

async function getFirstLoadedImage(urls) {
  for (const n of urls) {
    try {
      return await loadImage(n);
    } catch (e) {}
  }

  throw 'ничего загрузить не удалось';
}

Или, рекурсия:

const getFirstLoadedImage = (urls, i = 0) => i < urls.length
  ? loadImage(urls[i]).catch(() => getFirstLoadedImage(urls, -~i))
  : Promise.reject('ничего загрузить не удалось');

Пользоваться этим, понятное дело, так:

getFirstLoadedImage(resolutions.map(n => `https://i.ytimg.com/vi/${videoId}/${n}.jpg`))
  .then(img => document.body.append(img))
  .catch(console.error);

Существует версия метода bind, позволяющая ограничить действие селектора определённым контейнером. Так что получаем элементы .item-gallery, и вызываем bind для каждого из них отдельно:

document.querySelectorAll('.item-gallery').forEach(n => {
  Fancybox.bind(n, '[data-fancybox="single"]', {});
});

Добавьте в дочерний компонент эффект, который будет зависеть от props'ов и обновлять состояние:

useEffect(() => setValue(props.value), [ props.value ]);

Это если прямо отвечать на спрошенное. Но действительно ли дочерний компонент должен хранить значение input'а у себя? Возможно, вы не конца понимаете, чего хотите, и вам надо узнать про подъём состояния.