oksanatkachik094

с градиентом, как и с фоновым изображением, transition не работает.
можно попробовать с помощью псевдоэлементов.
https://codepen.io/archelon/pen/XWEMVGW

data: () => ({
  handle: null,
  ...
}),
mounted() {
  const mql = matchMedia('(max-width: 768px)');
  const onChange = () => this.handle = mql.matches ? '.image' : null;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

<draggable
  :options="{ handle, ... }"
  ...
>

Можешь задать атрибуту tabindex отрицательное значение.
<input tabindex="-1" placeholder="" />

Если работать не будет(у меня работало), то можно так:
element.tabIndex = -1

<span class="amount-curr whole-text">валюта&nbsp;с&nbsp;НДС</span>

Или

.amount-curr {
  white-space: nowrap;
}

Не понятно, почему его нужно скрыть, если вам нужен вертикальный.
И max-width точно никто не отменял.

селектор перетаскиваемого элемента:active {
  cursor: что сюда можно вписать, смотрите здесь - developer.mozilla.org/en-US/docs/Web/CSS/cursor
}

Я обычно делаю градиент через этот сервис https://cssgradient.io/

Все зависит от поведения попапа. Если он не модальный и не реагирует на клик по затеняшке, то состояние должно сохранится .