Aetae

Ну так не надо делать кашу.)

Используйте только то что нужно, когда нужно:
Ответ на запрос к api нужен только в рамках компонента? Просто запрашивайте в рамках компонента.
Ответ должен быть использован в нескольких не связанных местах? Используйте стор(pinia или любой иной).

Как ты собрался "обернуть все запросы в composable" - непонятно. Composable нужны для работы с логикой компонента, запросы api никак с этим не связаны, они просто поставляют данные. Если с этими данными потом уже нужна какая-то хитрая работа - тогда можно делать composable, который просто внутри себя будет использовать твои отдельные api модули. Смешивать всё в кучу точно не нужно.

P.S. Composable - это не какая-то особая тумба-юмба, если не очевидно, это просто обычные функции. От любых иных они отличаются только тем, что внутри себя используют vue-хуки(тоже просто функции), а потому привязаны к компоненту внутри которого вызываются и не могут работать вне компонента.

P.P.S. Те кто рекомендуют пихать запрсы в стор - долбоёбы. Были во времена vue2 остались и сейчас. Стор - это хранилище, он хранит. Работа с api должна быть от него отделена, иначе получится каша.

Нет.

В любой непонятной ситуации тыкаешь ctrl+click и читаешь, что там написано.

В данном случае это ложное срабатывание на попытку переписать window.name. Можешь им баг запилить.
Еслиб ты сделал так var { name, surname, age } = myUser, то это было бы реальной ошибкой: ты неявно бы менял name окна, но для const это не актуально.

Ну и, по-хорошему, не стоит заводить переменные в глобальной области. Если ты используешь js-модули или хотя-бы завернёшь свой код в блок или функцию - такой проблемы не возникнет.

С Vue и Vuex проблем нет.
Вместо import getPRoducts напиши

const getPRoducts = async () => {
  return [1, 2, 3]
}

и сможешь в этом убедиться.

Проблема с твоим "сервисом" запросов. Смотри в консоль - он вообще работает, у тебя настроен cors, чтоб запрашивать с других портов? Если нет, то и не настраивай - используй devserver proxy и обращайся по относительным ссылкам как это будет и в проде.

Ответ: по ситуации. :)

В идеальном мире: сторонние компоненты должны поддерживать всю возможную стилизацию стандартизированным образом: либо через props, либо (реже и хуже) через документированные классы разрешённые к изменению сверху. В ином случае всегда будет оставаться шанс, что всё развалится при обновлении компонента.

Теперь собственно к нашему, катящемуся в бездну, миру: да, смотреть шаблон компонента и менять стили через :deep или глобально. Обязательно писать к этому тесты, чтобы отвал после какого-то обновления не пролез незаметно на прод.
Если править классы становится слишком сложно, то форкать к себе, и править как хочешь. Также можно форкнуть если компонент простой.

Обратно к идеальному миру: при желании можно попробовать пропихнуть пул реквест автору оригинального компонента, поддерживающий нужную кастомизацию(естественно в универсальном и удобном виде).

<img> - это чисто картинка, которая ведёт себя как картинка и никак иначе, никакой интерактивности.

Ты можешь либо использовать object\embed\ifrrame, либо преобразовать в svg symbol и использовать svg use.

Вот тебе универсальная функция:

function setValue(element, value, options) {
  if(typeof element === 'string') 
    element = document.querySelector(element);

  options = Object.assign({
    bubbles: true
  }, options);

  element.dispatchEvent(new MouseEvent('mousedown', options));
  element.dispatchEvent(new MouseEvent('mouseup', options));
  element.dispatchEvent(new MouseEvent('click', options));
  element.dispatchEvent(new Event('focus', options));
  element.dispatchEvent(new Event('keydown', options));
  element.dispatchEvent(new Event('keypress', options));

  element.value = value;

  element.dispatchEvent(new Event('input', options));
  element.dispatchEvent(new Event('keyup', options));
  element.dispatchEvent(new Event('change', options));

  setTimeout(() => element.dispatchEvent(new Event('blur', options)));

  return element;
}

setValue('input[name="email"]', 'новое_значение@example.com')

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

Чтоб сортировать весь массив - надо сортировать весь массив.
v-for="(item, index) in currentPageSortedList"

data: {
  list: [...bread[0]], // или просто bread? х.з. не ясно, что там
  // ...
},
computed: {
  sortedList() {
    const sort = {
      "По популярности": "changePopular",
      "По возрастанию цены": "changePlus",
      "По уменьшению цены": "changeMinus",
      "Сначала обсуждаемые": "changeDiscussed",
      "Сначала с лучшей оценкой": "changeBest"
    }[this.selected];
    // лишний slice здесь для того чтобы клонировать массив
    // т.к. sort мутирует исходный  
    return sort ? this.list.slice().sort(this[sort]) : this.list;    
  },
  currentPageSortedList() {
    const perPage = 6;
    const position = this.currentPage * perPage;   
    
    return this.sortedList.slice(position, position + perPage);;
  },
  // ...
},
watch: {
  // при смене выбора скидываем на первую страницу
  selected() {
    this.currentPage = 0;
  }
}

useStore() как и любой хук(useX) надо использовать внутри setup секции компонента.

В данном случае это нужно для того, чтобы получить store именно этого app(на станице может быть несколько app, каждый со своим store).

Чтоб можно было использовать функции из других модулей\библиотек, у которых нет доступа к текущему массиву напрямую из области видимости.

Для чего может понадобится весь массив? Да для много чего. Например классический(но не оптимальный) фильтр уникальных значений:

const uniq = (value, index, array) => !array.includes(value, index + 1);

[1, 2, 2, 3, 3, 3].filter(uniq) // [1, 2, 3]

Зависит от того, что вам нужно: "шашечки или ехать".

Коли первое - то тут уж надо глубоко изучать документацию по jsdoc, без гарантированного результата. Ради (почти) никому не нужных извращений я не возьмусь. :)

Коли второе - IDE сейчас кушают любой typescript в jsdoc, потому просто смело пихаете:

/** @type {Array<ReturnType<typeof createElement>>} */

и оно заработает. Но никаких долговременных гарантий.

Чтобы исправить эту и многие иные ошибки надо включить мозг. Прям остановиться, нажать кнопку power on, и таки прочитать: кто тебе пишет, что тебе пишет, почему он тебе такое пишет.

Итак:
Кто тебе пишет? Пишет тебе набор правил vuejs-accessibility(vuejs-доступность по нашему). Этот набор правил сам по себе появиться не мог, он ставится дополнительным плагином. Если ты не знаешь откуда он у тебя взялся и тебе плевать на всяких инвалидов - можешь смело удалить этот плагин из eslint и забыть.

Что тебе пишет? Коли по-басурмански ты не разумеешь, то тебе поможет гугл-транслейт:
1. @mouseout или @mouseleave должны сопровождаться @focusout или @blur для доступности.
2. @mouseover, @mouseenter или @hover должны сопровождаться @focusin или @focus для доступности.

Почему он тебе такое пишет? Вот тут запускай свой мозг на все 146% и начинай по-нстоящему думать. Почему же совместно с @mouseenter нам может понадобится @focusin, если нам это советует правило по доступности? Думай, думай...
Может быть для того, чтобы человек без возможности оперировать мышью смог таки с помощью клавиатуры вызвать связанные события, мм? И небольшое дублирование кода, которое поможет таким людям, совсем не страшно.

P.S. Пока не выключен мозг - подумай ещё:
1. К каким последствиям приведёт бездумное (лишь-бы-eslint-заткнулся) добавление одновременно @focus и @focusin?
2. Не будет ли конфликтов внутри функций в случае получения элементом фокуса таки мышкой?
...

Вопрос в том что ты там закрываешь и открывешь, что у тебя в {{Route('ChangeLanguage', N)}}?
Если там что-то вида /en и /tr то у тебя будет открываться собственно та версия, которая сохранена в закладках\истории, а не так которая была выбрана.

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

selectLang.selectedIndex = localStorage.getItem(storageKey);

вызовет change автоматически - это не так, программная смена не вызывает событий.

Теперь о самом коде:
1. Нахрена там fetch? Ты зачем-то грузишь страницу в воздух, после чего переключаешь на неё.
2. Весь код в принципе хрень. Перенаправление на нужный язык должно происходить на сервере. Если нужен выбор на клиенте с запоминанием - используй куки и читай эти куки на сервере.

Да вроде работает:
В каком именно браузере проблема?

Если исправить все "технические" ошибки, которых у тебя тонна - то в самом коде Vue всё в порядке и переключение работает. :)

Ошибки из-за которых оно вообще не должно собираться, а должно всю консоль исписать:
1. Лишний закрывающий </div> в <template>.
2. v-on: mouseover="out" должно быть слитно v-on:mouseover="out".
3. Экспортируемый объект у тебя закрывается после data, methоds висят в воздухе.
4. Не <styles>, а <style> причём судя по вложенности не просто <style>, который ожидает обычный css, а <style lang="scss">.

Потенциальные ошибки:
1. Отсутствие методов out и select.
2. Отсутствие у <a> href="#" или, лучше, v-on:click.prevent из-за чего клик по ссылке открывает новую вкладку. А ещё лучше - не использовать <a> не для сссылок.
3. Скорее всего ты хочешь, чтобы в случае если one - стока, то назначался класс из этой строки, а не класс .one, в таком случае выглядеть это должно так: v-bind:class="[one, { stels: stels }]" или, хуже, v-bind:class="{ [one]: one, stels: stels }".

В целом: мужик, используй IDE, она тебе всё это заранее подчеркнёт; например VSCode абсолютно бесплатна.

Если ты пишешь код, то как советуют выше - настрой(изучи) IDE. Современные IDE умеют всё, что ты можешь только себе вообразить(и ещё больше чего не можешь).

Если ты хочешь уметь это делать в браузере для каких-нить форумов - установи расширение для пользовательских скриптов (например tampermonkey) и напиши себе простенький код на js(или найди готовый).

Если ты хочешь уметь это делать прям универсально в рамках всей винды - тоже есть вариант: установить autohotkey и написать ещё более простой скрипт.

dangerouslySetInnerHTML
Как следует из названия - стоит дважды подумать, прежде чем использовать в продуктивном коде.

Измени:
const htmlStr = xlsx.write(wb, { type: "binary"
на:
const htmlStr = xlsx.write(wb, { type: "string"

"binary" - это спецформат т.н. "бинарная стока", она подходит для записи в файл напрямую побайтово, но не подходит для отображения на экране.