Aetae

{
  beforeCreate() {
    this._oldTitle = document.title;
  },  
  unmounted() {
    if (this.PAGE_TITLE)
      document.title = this._oldTitle;
  },
  watch: {
    PAGE_TITLE: {
      handler(val, oldVal) {
        if (val)
          document.title = val;
        else
          document.title = this._oldTitle;
      },
      immediate: true
    },
  }
}

const PAGE_TITLE = ref('<title>'); // computed(() => ...)
// ...
return { 
  PAGE_TITLE,
  // ...
}

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

defineProps({
  newsListItem: Object
});

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

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 })

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 });
});

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

{
		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
					}
				]
			},
		], 
	}