Aetae

let newsListItem = defineProps({
  newsListItem: Object
});

->

defineProps({
  newsListItem: Object
});

или, если нужно использование свойств не только в шаблоне:

const props = defineProps({
  newsListItem: Object
});

1. Завяленные свойства по умолчанию уже есть в шаблонах.
2. defineProps - возвращает реактивный объект props целиком, а не какое-то конкретное из свойств.

По хорошему - тебе это не должно быть нужно. В 99% случаев возникновение такой необходимости говорит о том, что где-то в структуре закралась ошибка (либо о неумении верстать).

В оставшемся 1%: element ref + ResizeObserver (или какая-нить готовая директива, которая сделает то же самое под капотом).

Во-первых: не используй onMounted внутри стора. onMounted - это хук компонента, а не стора. Оно работает только благодаря стечению обстоятельств.
Во вторых: products должны быть ref. Сейчас они не реактивны(никак не реагируют на изменения). При этом ты присваииваешь массиву value. То что это хоть как-то работало - очередное чудо.
В-третьих: ты должен учитывать, что какое-то время данные будут грузиться и показывать лоадер пока их нет.

В общем если загрузка должна начинаться в лбом случае при первой инициализации store'a(обычно загрузку привязывают к маршрутам или компонентам), то выглядеть оно будет как-то так:

export const useAllMainFiltersStore = defineStore('allMainFilters', () => {
  const products = ref([]);

  try {
    async function getStoreData() {
      sidebarResizeStore.updateSidebarVisibility()
      const data = await productsData();
      products.value = data;
    }
    getStoreData()
  } catch (error) {
    console.error('Error:', error);
  }
  
  return {
    products,
  }
})

В компоненте:

const route = useRoute();
// продукт делаем вычисляемым, чтоб не городить вотчеров
const product = computed(() => getProductById(route.params.id));

function getProductById(id) {
  console.log('products component: ', mainFiltersStore.products) //при первой загрузке всё ок, при перезагрузке страницы всё ломается и пустой массив в придачу
  return products.find(product => product.id == id);
}

watch(product, current => {
  // проверяем что продукт есть
  if (current) fetchComments(current.id);
}, { immediate: true })

Ответ очевиден - не использовать недокументированные* свойства типа __vueParentComponent.:)

Раз ты используешь options api у тебя есть this.$parent для родительского компонента или ты можешь использовать ref для выбора конкретного.

Однако в любом случае обращение к родителю выглядит как говнокод. Пробрасывай значение в props из родителя и не городи огород.

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

Я хз что такое AmoCrm, но если надо тупо добавить не-vue скрипы как vue-компонент, то как-то так:

import { ref, h } from 'vue';

function loadScript(options, root = document.head) {
  return root.appendChild(Object.assign(document.createElement('script'), options));
}

const Comp = defineComponent(() => {
  const root = ref(null);

  onMounted(() => {
    loadScript(
      {
        innerHTML: `
      !(function (a, m, o, c, r, m) {
    (a[o + c] = a[o + c] || {
        setMeta: function (p) {
            this.params = (this.params || []).concat([p]);
        },
    }),
        (a[o + r] =
            a[o + r] ||
            function (f) {
                a[o + r].f = (a[o + r].f || []).concat([f]);
            }),
        a[o + r]({
            id: "....",
            hash: "....",
            locale: "ru",
        }),
        (a[o + m] =
            a[o + m] ||
            function (f, k) {
                a[o + m].f = (a[o + m].f || []).concat([[f, k]]);
            });
})(window, 0, "amo_forms_", "params", "load", "loaded");
      `
      },
      root.value
    );
    loadScript(
      {
        id: 'amoforms_script_...',
        async: 'async',
        charset: 'utf-8',
        src: 'https://forms.amocrm.ru/forms/assets/js/amoforms.js?...'
      },
      root.value
    );
  });

  return () => h('div', { ref: root });
});

В entity.selectedAccesses лежит последнее значение =\

Судя по документации тэг добавляется также и в модель(т.е. в entity.selectedAccesses), а не только в options(что называется у тебя value).

С учётом слота, можно сделать примерно так:

Точно также как и не в nuxt.

function manualSmoothScroll(event) {
  // находим хэш ссылу по которой мы кликнули
  const id = event.target.closest('a[href^="#"]')?.hash;
  // если клик куда-то ещё - ничего не делаем
  if (!id) return;
  
  
  // находим цель куда будем скроллить по хэшу
  const target = document.querySelector(id);
  // если не нашли - ничего не делаем
  if (!target) return;
  
  // отменяем стандартный переход
  event.preventDefault();
  // едем руками
  target.scrollIntoView({ behavior: "smooth" });
}

// при загрузке
addEventListener('click', manualSmoothScroll, true);


// при выгрузке
removeEventListener('click', manualSmoothScroll, true);

// если действовать надо только в рамках элнметата
// elementRef.value.addEvent... elementRef.value.removeve... 
// или this.$refs.element... 
// или this.$el...

На обычном Vue роутере такие маршруты делаются примерно так:

{
		path: '/catalog/mebel', 
		children: [
			{
				path: 'page-:page(\\d+)?', 
				alias: '',
				component: Mebel,
			},
			{
				path: ':category', 
				children: [
					{
						path: 'page-:page(\\d+)?', 
						alias: '',
						component: MebelCategory
					},
					{
						path: ':article', 
						component: MebelArticle
					}
				]
			},
		], 
	}

В nuxt это можно добавить\изменить тут.

У тебя проблема не в vue, а в базовом html:
Оба input у тебя получают одинаковый id и оба label одинаковый for. Поведение браузера при клике на label в таком случае не определено, но на практике это значит, что клик идёт всегда первому input.

Соответственно надо сделать либо так:

<label class="form-check-label">
  <input 
    type="checkbox" 
    role="switch"
    v-model="methodId"
    :value="method.id"
    class="form-check-input" 
  />
  {{ method.name_method }}
</label>

Либо как-то так:

<input 
  :id="`input-${method.id}`" 
  type="checkbox" role="switch"
  v-model="methodId"
  :value="method.id"
  class="form-check-input" 
/>
<label :for="`input-${method.id}`" class="form-check-label">
  {{ method.name_method }}
</label>

Просто не давть пользователю повторно тыкать там, где это вызовет повторный запрос, пока идёт загрузка текущего?

Но если хочется быть ленивым - можно просто обернуть запросы в leading debounce-promise.

Все эти thunk и saga - полная ересь, порождённая богомерзким redux.

app.component('MyComponent', MyComponent) 0_o

Никак. Пользователь сам решает, что ему делать.
Ты можешь только запилить большую красивую кнопку "Обновить", чтоб ему захотелось нажать на неё, а не на стандартную.:)