0xD34F

Можно использовать Vue.compile для компиляции шаблона, и определить собственную render-функцию, которая будет использовать результат компиляции. Как-то так.

Как-то у вас всё многословно и сильно переусложнено. Зачем целиком переопределять obj и несколько раз вызывать setState? - результат следующего вызова перетирает результат предыдущего, наверняка причина того, что ограничения координат не применяются, кроется где-то тут. Наверное, стоит создавать объект один раз, сразу с нужными значениями свойств, как-то так:

class App extends React.Component {
  state = {
    divStyle: {
      display: 'flex',
      alignItems: 'center',
      width: '1000px',
      height: '500px',
      outline: '1px solid red',
      position: 'relative',
    },
    move: {
      position: 'absolute',
      width: '200px',
      height: '100px',
      outline: '1px solid green',
      left: 100,
      top: 200,
    },
  }

  handlerMouseDown = e => {
    this.deltaX = e.pageX - this.ourdiv.offsetLeft;
    this.deltaY = e.pageY - this.ourdiv.offsetTop;
    window.addEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseUp = e => {
    window.removeEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseMove = ({ pageX }) => {
    this.setState(({ move }) => ({
      move: {
        ...move,
        left: Math.min(700, Math.max(100, pageX - this.deltaX)),
      },
    }));
  }

  render() {
    return (
      <div>
        <div style={this.state.divStyle}>
          <div
            ref={ourdiv => this.ourdiv = ourdiv}
            style={this.state.move}
            onMouseDown={this.handlerMouseDown}
            onMouseUp={this.handlerMouseUp}
          ></div>
        </div>
      </div>
    );
  }
}

https://github.com/SortableJS/Vue.Draggable

Есть даже демо для вашего случая.

Есть такая штука - nextTick. С ёё помощью можно вызвать функцию после обновления DOM-дерева. Т.е., делайте так:

this.stage = 1;
this.$nextTick(() => {
  const elem = document.querySelector('.elem');
  ...
});

constructor({
  container: slider_container = 'container', 
  slides: slides_name = 'slide',
  controls: { state = false, previousAnimation = null, nextAnimation = null } = {}
})

<div class="map" id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

html, body {
  padding: 0;
  margin: 0;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}

let iconIndex = -1;
const icons = [
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Chartreuse-icon.png',
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Azure-icon.png',
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Pink-icon.png'
];

google.maps.event.addDomListener(window, 'load', function() {
  const latlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: latlng,
  });

  const marker = new google.maps.Marker({
    position: latlng,
    map,
  });

  google.maps.event.addListener(marker, 'click', function() {
    iconIndex = (iconIndex + 1) % icons.length;
    marker.setIcon(icons[iconIndex]);
  });
});

-background: #ebeef3 url(http://picsee.net/upload/2018-01-30/e70bd07d18e0.png) no-repeat 10px 15px;
+background: #ebeef3 url(http://picsee.net/upload/2018-01-30/e70bd07d18e0.png) no-repeat 10px 50%;

const $wrapper = $('.wrapper');
$wrapper
  .children()
  .sort((a, b) => $('p', a).text() - $('p', b).text())
  .appendTo($wrapper);

или

const wrapper = document.querySelector('.wrapper');
wrapper.append(...Array
  .from(wrapper.children, n => [ n, +n.querySelector('p').innerText ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);

$.when($('.item').fadeOut(300)).then(func);

или

$('.item').fadeOut(300).promise().then(func);

Первое, на что стоит обратить внимание - sectionVal, который вы пытаетесь вывести, он один на все строки. Так у вас везде будет одно и то же. Наверное, стоит сделать sectionVal объектом, ключами будут id строк, значения - то что вы будете получать в результате своего запроса.

Ну а дальше всё просто - в методе section просто обновляете sectionVal по id строки, типа так (запроса понятное дело нет, просто дублируются введённые данные, но думаю, принцип понятен).

Не надо ничего проверять, просто отменяйте всплытие события в обработчике клика по кнопке.

Проблема не в фильтре, а в способе замены. Чтобы заменить все пробелы, вместо строки выполняйте поиск по регулярному выражению с модификатором g:

Vue.filter('lhprob', val => val && val.toString().replace(/ /g, 'GG'));

P.S. Ну и это, вот ещё что - определяйте фильтр до инициализации приложения, а не после. А то при первом рендеринге в консоль падает [Vue warn]: Failed to resolve filter.

function($i) use ($var) {

А вы вообще понимаете, что делает метод forOwn? Явно нет. Он перебирает собственные свойства объекта, передавая их в коллбек. Всё. Что вы там из коллбека вернёте - неважно, forOwn вернёт переданный объект. Документацию могли бы и почитать.

Вам lodash тут не нужен:

Object.keys(notif).map(key => <div key={key}>{key} - {notif[key]}</div>)

А если всё же без него никак, то используйте map вместо forOwn:

_.map(notif, (value, key) => <div key={key}>{key} - {value}</div>)

document.querySelector('input').addEventListener('input', function() {
  this.value = this.value.toUpperCase();
});

text-transform: uppercase; - не подходит, так как влияет только на отображения, не меняя сами данные

Кстати, подходит. Надо только будет выполнять .toUpperCase() при получении значения input'а.

get () { this.$store.getters['newRequest/selectedCreditStatus'] }

Нигде return не потеряли?

Замечу, что, не хотелось бы отказываться от геттеров и сеттеров в пользу всяких data () {} и methods: {}. Уже делал в таком варианте и получилось довольно громоздко и некрасиво.

Если вдруг откажетесь (если что, я этого делать не призываю), ничего громоздкого писать не придётся, класть в data ничего не нужно, создавать метод не обязательно. Чем является v-model? - это привязка значения + прослушивание события. Т.е.,

:value="геттер" + @input="мутация($event.target.value)"

ul a {
  color: black;
}

ul li:hover > a {
  color: red;
}

https://jsfiddle.net/pbw5L1eq/

Не знаю, что ещё можно добавить к уже сказанному в документации. Думаю, наглядная демонстрация поможет лучше понять, что к чему.

Пример номер раз - key нет. Пример номер два - key есть. Тыкаем кнопочку и смотрим, что происходит со значениями в инпутах. В первом случае они остаются на месте, во втором начинают ездить по кругу (аналогично элементам массива). Почему так? Возвращаемся к процитированному вами отрывку из документации, и осознаём, что в первом случае

Vue использует алгоритм, минимизирующий перемещение элементов

а во втором

Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей

Проверяйте, что у вас получается при конвертации в число:

const arr = str.split(' ').map(n => isNaN(n) ? n : +n);

В какой таблице и при наличии какого содержимого надо скрывать строки:

const tableSelector = 'таблица ваша, так что вам и виднее, какой у неё селектор';
const text = 'Материал';

Скрываем:

$(`${tableSelector} tbody tr:contains(${text})`).hide();

или

for (const { rows } of document.querySelector(tableSelector).tBodies) {
  for (const tr of rows) {
    for (const td of tr.cells) {
      if (td.innerText.includes(text)) {
        tr.style.display = 'none';
        break;
      }
    }
  }
}

или

.hidden {
  display: none;
}

document.querySelectorAll(`${tableSelector} tbody tr`).forEach(tr => {
  tr.classList.toggle('hidden', ~tr.textContent.indexOf(text));
});