Артем Прохоров

const props = computed(() => isDragging.value
  ? { onClickCapture: withModifiers(onClick, [ 'prevent', 'stop' ]) }
  : null // или { onClick }, если надо только модификаторы убрать
);

<div v-bind="props">

defineModel нужна для двусторонней привязки модели из дочернего к родителю, а не для стора.

Для привязки к пинии достаточно привязать переменную из стора напрямую к v-model. Пиния не запрещает так делать.
Если нужно привязывать импортированную в родителе переменную пинии, то просто передать её в v-model дочернего, где есть переменная defineModelбез имени.

Можно через записываемый computed, как в ответе выше, но это скорее нужно при более сложной логике получения и установки.

Ну и самое классическое решение - в сторе сделать метод установки переменной, повесить его на обработчик в компоненте. А значение брать через :model-value

В какую сторону можно начать копать уже сейчас?

В сторону казахстанской границы.

ky0 дал единственный правильный ответ. Частично. Поскольку РК в будущем будет входить в "красный" сегмент, если принципиально важен доступ к сайтам Европы и Штатов, то РК - транзитный узел на пути куда-нибудь в Европу/Америку/Австралию etc (которые будут входить соответственно в "радужный").

Распад тырнета на сегменты - к сожалению ближе, чем мы все думаем. Причем нынешняя эпопея VPN - она его ускоряет.

Еще минутка "оптимизма".

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

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

Так что позарез нужно настраивать клиент-прокси так, чтобы пускал через сервер только заблокированное, а в X-UI ставить галки "не ходить на ресурсы из Китай/Ирана/России".
Как долго сервер висит в сером списке - я фз, можешь у хостера заказать смену IP адреса на новый, но при неосторожном использовании новый IP улетит туда же. Может, стоит временно использовать клиентское решение типа goodbyedpi, чтобы про сервер "забыли".

Вот по-быстрому накидал в качестви зарядки такой кастомный дерьмохук (который ни в коем случае нельзя использовать в проде, только в целях демонстрации. :) ):

import { Ref, computed, ref, watch, onMounted, onUnmounted } from 'vue';

function isHTMLElement(arg: unknown): arg is HTMLElement {
  return !!arg && arg instanceof HTMLElement;
}

function useCSSVariable(
  variable: string,
  el: HTMLElement | Ref<HTMLElement> = document.documentElement
) {
  if (!variable.startsWith('--')) variable = `--${variable}`;
  if (!isHTMLElement(el)) watch(el, value => (el = value), { immediate: true });

  const prev = ref();

  let timeoutId: number;
  const interval = () => {
    const current = isHTMLElement(el)
      ? getComputedStyle(el).getPropertyValue(variable)
      : null;

    if (current !== prev.value) prev.value = current;

    timeoutId = window.setTimeout(interval, 100);
  };

  onMounted(() => {
    interval();
  });

  onUnmounted(() => {
    clearTimeout(timeoutId);
  });

  return computed<string>({
    set(value) {
      let current: null | string = null;

      if (isHTMLElement(el)) {
        el.style.setProperty(variable, value);
        current = el.style.getPropertyValue(variable);
      }

      if (prev.value !== current) prev.value = current;
    },
    get() {
      return prev.value;
    }
  });
}

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

Вопрос по большому счёту не относится к vue.

Решения:
1. Использовать класс-модификатор, который порасит как надо.

<template>
  <input class="hover--red"/>
</template>

<style>
.hover--red:hover {
  color: #f00
}
</style>

2. Использовать css (не путать с scss) переменные.

<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input :style="{'--hover-color': hoverColor}"/>
</template>

<style>
input:hover {
  color: var(--hover-color)
}
</style>

...upd: совсем забыл про такую фичу vue:
3. Если стили лежат в sfc можно использовать переменные через v-bind в <style>:

<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input />
</template>

<style>
input:hover {
  color: v-bind(hoverColor)
}
</style>

А забыл я про неё потому, что категорически против такого смешения кода и стилей. Но я не могу вам запретить.:)

Значения по умолчанию для этого не предназначены.
Сделай computed значение в которым смежри входящее с дефалтным как тебе нвдо.

Поле depends_on определяет только последовательность запуска и удаления сервисов, к остановке отношения не имеет.
Искомое вами поведение задаётся через healthcheck проверки доступности базы в backend и бэкенда во frontend... или простой docker compose -f путь/до/docker-compose.yaml stop, т.е. просто остановить все сервисы.

На том же самом 443 порту прослушать не получится, потому придётся прослушивать на отдельном, и проксировать через nginx.
Нужно добавить отдельный блок server для поддомена (или несколько блоков), но со своими настройками и без default_server. Не старые блоки заменить, а дописать новые. Что-то вроде этого:

server {
    listen [::]:80;
    listen 80;

    server_name api.example.com;
    return 301 https://$host$request_uri;
}

server {
    listen [::]:443 ssl;
    listen 443 ssl;
    http2  on;
    server_name api.example.com;
    ssl_certificate путь_к_серту_для_api.example.com;
    ssl_certificate_key путь_к_ключу_для_api.example.com;
    location / {
        proxy_pass 127.0.0.1:порт_вашего_приложения;
        ........
        ........
    }
}

Запрещено, если сайт действует в России, его владелец россиянин и его использует россиянин.

Соответственно ты можешь иностранным пользователям давать иностранные сервисы аутентификации.

Если сайт не доступен в России, то тоже можно использовать все сервисы.

Если в России доступен, то перед аутентификацией надо спросить у пользователя, откуда он и не показывать иностранные сервисы тем, кто в россии

Читайте закон.

Владелец сайта и (или) страницы сайта в сети "Интернет", и (или) информационной системы, и (или) программы для электронных вычислительных машин, являющийся российским юридическим лицом или гражданином Российской Федерации и осуществляющий свою деятельность в сети "Интернет" на территории Российской Федерации, в случае, если доступ к информации, размещенной на его сайте и (или) странице сайта в сети "Интернет", и (или) в его информационной системе, и (или) программе для электронных вычислительных машин, предоставляется пользователям, прошедшим авторизацию, обязан проводить ее в отношении пользователей, находящихся на территории Российской Федерации, одним из следующих способов: ...

потому left - это то, сколько останется до края при прилипании, а в примере даже предыдущая колонка шире. Кажется, в данном случае лучше всего использовать offsetLeft для этого значения.

как-то так:
https://codepen.io/FragsterAt/pen/XWwYBbg?editors=1010

Ну как-то так

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

Хотя в версии 3 уже работает и так

<router-link :to="{ name: 'routeName'}" target="_blank">
Текст
</router-link>

Контейнеру прописать:

overflow: hidden;

! - приведение к булевому значению и смена его «знака» на противоположный.
!! – приведение к булевому значению и двойная смена его «знака» на противоположный. То есть упрощение любого типа данных до true или false.

!42 -> false
!!42 -> true

Никак, для отслеживания изменения ширины элемента нужно цепляться с помощью ResizeObserver непосредственно к dom элементу. Ну и обращение к $parent выглядит как какой-то костыль.