0xD34F

const LENGTH = чему-то там равно, это вам виднее;
const input = document.querySelector('селектор инпута');
const button = document.querySelector('селектор кнопки');

input.addEventListener('input', e => {
  button.style.display = e.target.value.length >= LENGTH ? '' : 'none';
});

input.dispatchEvent(new Event('input'));

я меняю другие данные

Это вам так кажется. Чтобы не казалось, надо заполнить пробелы в знаниях основ js.

Хотите, чтобы не менялось - вырезаете created, в качестве начального значения columns устанавливаете

this.type === 'columns'
  ? this.items.slice(1).map(n => ({ ...n }))
  : []

if (typeof defaultBg1 == 'Background') // ???

Это по-другому делается (с известными ограничениями - у null и undefined свойств не бывает, попытка обратиться к конструктору в их случае приведёт к TypeError; кроме того, instanceof проверяет всю цепочку прототипов, т.е., например, [ 1, 2, 3 ] одновременно и instanceof Array, и instanceof Object):

if (defaultBg1 instanceof Background)
// или
if (defaultBg1.constructor === Background)
// или
if (defaultBg1.constructor.name === 'Background')

А вообще, можно соорудить такой костыль:

const type = x => x == null ? `${x}` : x.constructor.name;

type() // 'undefined'
type(null) // 'null'
type(true) // 'Boolean'
type(69) // 'Number'
type('hello, world!!') // 'String'
type(/./) // 'RegExp'
type([ 187 ]) // 'Array'
type({ z: 666 }) // 'Object'
type(document) // 'HTMLDocument'
type(document.querySelectorAll('div')) // 'NodeList'
type(new class XXX {}) // 'XXX'
type(type) // 'Function'

Делаете график свойством компонента:

chartObj: Chart;

this.chartObj = new Chart(reportCtx, ...

Соответственно, данные графика станут доступны как

this.chartObj.data.datasets

После внесения туда необходимых изменений обновляете график:

this.chartObj.update();

UPD. https://stackblitz.com/edit/angular-h83adp-chartjs...

Почитайте про стрелочные функции, например - это поможет вам ответить на свой вопрос самостоятельно.

Так, и в чём проблема-то? У вас же уже всё есть - при обработке ответа вы собираете массив devices, в шаблоне вы массив devices выводите. Надо только закинуть devices из обработки ответа в data - вместо той ерунды, что у вас сейчас (отдельные свойства одного элемента).

UPD. Вынесено из комментариев:

Немного недопонял, можешь продемонстрировать как это задать?

В data компонента определяете массив devices:

data: () => ({
  devices: [],
}),

При получении ответа закидываете в devices полученные данные:

this.devices = Object.entries(res.data).map(([ id, n ]) => ({ ...n, id }));

Ну и выводите их:

<ul>
  <li v-for="d in devices" :key="d.id">
    ...

function getRootItem($id, $array) {
  foreach ($array as $item) {
    if ($item['id'] === $id) {
      $parent = $item['parent'];
      return $parent === 0 ? $item : getRootItem($parent, $array);
    }
  }

  return null;
}

const reg = /^[А-ЯЁ][а-яё]*(-[А-ЯЁа-яё][а-яё]*)?$/;

// ok
console.log([
  'Анна',
  'Анна-Мария',
  'Анна-мария',
].map(n => reg.test(n)));

// не ok
console.log([
  'анна',
  'аНна',
  'АННА',
  ' Анна',
  'Анна ',
].map(n => reg.test(n)));

const trim = (str, c = '\\s') =>
  str.replace(RegExp(`(^[${c}]+)|([${c}]+$)`, 'g'), '');

const getDateOfNearestDay = (day, date = new Date()) =>
  new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate() + ((7 + day - date.getDay()) % 7)
  );


const dateOfNearestSaturday = getDateOfNearestDay(6);

Можно сделать через css, с использование image-mask, как-то так.

Или svg - ну, тоже маску используем. Например.

получаю ошибку

Текст ошибки показывать не надо, так держать (не так).

вызываю в дочернем компоненте this.props.getCity(1, 'П')

Которого, если верить показанному вами коду, нет. Смотрим, откуда берётся getCity в дочернем компоненте - видим, что getCity={this.getCity}, при этом метод getCity в родительском компоненте отсутствует. Есть getCities. Это как?

передается пустой токен

Если для корректного функционирования дочернего компонента нужен токен, то не надо рендерить компонент в его отсутствие, дождитесь получения:

{this.state.token && <NewAdvert id="newadvert" 
  user={this.state.fetchedUser}  
  cities={this.cities}
  getCities={this.getCities}
  getCity={this.getCity}
  token={this.state.token}
  getToken={this.getToken}
  go={this.go}
/>}

Предполагается, что когда пользователь нажмет на фильтр, у меня вызовется функция setRouter...

Предположение неверное, вызов происходит в момент рендеринга фильтра - заведомо ДО того как пользователь по нему кликнет. То есть, в качестве роута фильтра устанавливается значение, которое после клика по фильтру окажется устаревшим - это и есть причина "запаздывания", о котором вы говорите.

Вот так, никакой магии.

Значения атрибутов for не соответствуют id радиокнопок. Соответственно, кнопки и не кликаются.

Чтобы можно было так вызывать, метод надо в прототип поместить: Vue.prototype.myGlobalMethod = ....

Делаете функцию полного пересчёта суммы, вызываете её при взаимодействиях пользователя с элементами внутри формы (события change, input, обработчик клика по кнопкам изменения количества). Как-то так.

Косяков и странностей тут навалом.

Значение max вы перед началом поиска устанавливаете равным максимальному индексу - отлично. А как же min - почему не устанавливаете его равным 0? Забыли? Или думаете что 0 там сам собой появится? Не появится.

Кстати, а зачем min и max класть в data? - вне binarySearchInit они не используются. Пусть будут локальными переменными этого метода.

Значения в массиве являются строками, так что у вас 11 будет меньше, чем 2 (или для вас не существует ничего больше девятки?). Надо сделать числами, замените .push(item) на .push(+item) (или .push(Number(item)), или .push(parseInt(item))). Соответственно, надо сделать числом и search - для этого достаточно добавить соответствующий модификатор v-model.

Сортировка введённых данных - по умолчанию элементы массива сортируются как строки. Заменить .sort() на .sort((a, b) => a - b).

Зачем такие сложности с отдельной кнопкой для получения данных? Сделайте array вычисляемым свойством:

computed: {
  array() {
    return this.info
      .split(';')
      .map(n => parseInt(n))
      .filter(n => !Number.isNaN(n))
      .sort((a, b) => a - b);
  },
},

Да и сам результат поиска тоже может быть вычисляемым свойством.

const values = Object.values(arr.reduce((acc, n) => {
  const t = acc[n.from];
  acc[n.from] = (t && t.to > n.to) ? t : n;
  return acc;
}, {})).map(n => n.val);

или (здесь корректные результаты будут только если значения to как вы показали - неотрицательные)

const values = Object.values(arr.reduce((acc, n) => {
  (acc[n.from] = acc[n.from] || [])[n.to] = n.val;
  return acc;
}, {})).map(n => n.pop());

или

const values = [...arr]
  .sort((a, b) => (a.from - b.from) || (a.to - b.to))
  .filter((n, i, a) => !a[i + 1] || a[i + 1].from !== n.from)
  .map(n => n.val);

Можно с помощью lodash.

const values = _
  .chain(arr)
  .groupBy('from')
  .map(n => _.maxBy(n, m => m.to).val)
  .value();