Николай

Тут либо тебе поможет 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```

Вроде все верно,
Вызываете fetchProducts внутри по клику sendData, либо прям по клику можно сразу вызвать fetchProducts и передать туда вашу строку

Если правильно вас понял, то есть несколько вариантов
1- Самый очевидный
в дочерний компонент значение получается в виде props от родителя. В дочернем компоненте делаете emit и в родителе подписываетесь на изменение пропса по этому эмиту, итого у вас 1 переменная у родителя, но вы в дочернем компоненте посылаете событие на изменение
2- Через ref, получаете инстанс компонента и можете сделать там изменение, через какой-то метод, который будет возвращать вам true/false состояния
3- Стор

Но , это все избыточно, верное и правильное решение под 1 пунктом

Вопрос, а зачем вы напрямую удаляете из стора ? Опиши для начала что вы хотите сделать, и зачем вам хранить в localStorage целый стейт ?
Если хотите проверять авторизован или нет, то кладите токен, для этого не надо целую библиотеку тянуть

Возможно вы что-то не то делаете?
Набросал пример, на vue3, все работает

Вотч отработает тогда, когда данные уже поменялись, и следовательно, если вы на него подпишитесь, у вас будет уже несколько тиков на обновление

<input :value="text" @input="addCurrentValue"/>
В которой вы уже можете решать, что делать с вводимым числом и потом менять то, что вам нужно

<svg :src="require('®/@material-icons/svg/1k/outline.svg')"></svg>

откуда у вас width, height берется ?
Судя по описанию, вам нужны вот эти параметры

minContainerWidth
Type: Number
Default: 200
The minimum width of the container.

minContainerHeight
Type: Number
Default: 100
The minimum height of the container.

minCanvasWidth
Type: Number
Default: 0
The minimum width of the canvas (image wrapper).

minCanvasHeight
Type: Number
Default: 0
The minimum height of the canvas (image wrapper).

minCropBoxWidth
Type: Number
Default: 0
The minimum width of the crop box.

Note: This size is relative to the page, not the image.

minCropBoxHeight
Type: Number
Default: 0
The minimum height of the crop box.

Note: This size is relative to the page, not the image.

Добрый день, проблема скорее всего в хуках жизненного цикла и в том, как вы инициализируете слайдер
Можете загрузить на codesandbox ваш проект, так будет понятнее
1- Покажите как у вас указан роутинг, если роутинг
2- Покажите как вы инициализируете ваши слайдеры?

Как-то так

Тебе надо получить эвент из инпута, в котором у тебя будут лежать уже загруженные файлы
refs не отработает, так как у тебя на инпуте нет ref, да и насколько я помню, реф - это объект, а не массив

{
  path: '*',
 component: PageNotFound // твой компонент
}

<component
        v-if="headCell?.decorator?.name"
        :is="headCell.decorator.name +'Cell'"
        :row="row"
        @decorator="handlerEmit"
      />

v-if="headCell?.decorator?.name"- такое условие в template не отрабатывает ведь, тебе надо его через computed
чтобы у тебя отработало eadCell.decorator.name +'Cell' - тебе нужен точно такой же импортированный компонент, у тебя он есть ? можешь скинуть весь код, так будет весьма понятно
headRow - это что такое , где ты его используешь ?