0xD34F

$str = implode('+', str_split($str, strlen($str) / 4));

const buttonSelector = '.button';
const blockSelector = '.div';
const activeClass = 'red';

function toggleBlock(blocks, buttons, button) {
  const index = Array.prototype.indexOf.call(buttons, button);
  blocks.forEach((n, i) => {
    n.classList[i === index ? 'toggle' : 'remove'](activeClass);
  });
}


// обработчик клика делегированный, назначается один раз
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const blocks = document.querySelectorAll(blockSelector);
    const buttons = document.querySelectorAll(buttonSelector);
    toggleBlock(blocks, buttons, button);
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально
const buttons = document.querySelectorAll(buttonSelector);
const blocks = document.querySelectorAll(blockSelector);
const onClick = e => toggleBlock(blocks, buttons, e.currentTarget);
buttons.forEach(n => n.addEventListener('click', onClick));

(1..height_result - 1).each do |n|
  space_count = (height.to_i - n).abs
  asterisk_count = height_result - space_count * 2 - 1
  print " " * space_count + "*" * asterisk_count + "\n"
end

Компонент отдельный сделайте:

Vue.component('v-tooltip', {
  template: `
<div class="wrp">
  <div class="btn" @click="visible = !visible">{{ label }}</div>
  <div class="tooltip" :class="{ visible }">{{ message }}</div>
</div>`,
  props: {
    label: {
      type: String,
      default: 'click me',
    },
    message: {
      type: String,
      default: 'hello, world!!',
    },
  },
  data: () => ({
    visible: false,
  }),
});

И создавайте столько экземпляров, сколько надо.

scoped

@input="onInput($event, product)"

methods: {
  onInput(e, product) {
    product.quantity = Math.max(0, parseInt(e.target.value) || 0);
  },
},

или

watch: {
  products: {
    deep: true,
    handler() {
      this.products.forEach(n => n.quantity = Math.max(0, parseInt(n.quantity) || 0));
    },
  },
},

А что, если надо было бы сделать 10 кнопок - вы бы под каждую написали отдельную функцию? Нет, так дела не делаются. Уберите id, добавьте кнопкам атрибут, который будет обозначать соответствующий год:

<input class="date">
<input class="date">
<input class="date">

const yearButton = year => `
  <button
    data-year="${year}"
    class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all"
  >${year}</button>
`;

$('.date').datepicker({
  showButtonPanel: true,
}).each(function(i) {
  $(this).datepicker(
    'option',
    'currentText',
    `Today ${yearButton(2015 + i * 2)}${yearButton(2015 + i * 2 + 1)}`
  );
});

$(document).on('click', '[data-year]', function() {
  $.datepicker._curInst.input.datepicker('setDate', `01/01/${$(this).data('year')}`);
});

$result = array_map(function($n) {
  return implode(', ', array_column($n, 'value'));
}, $arr);

Всё работает корректно. Свойства, имена которых не являются целыми числами большими или равными нулю, отбрасываются. У вас же массив. Используйте объект.

Рекурсия есть:

const nestedToPlain = (obj, path = '') =>
  Object.entries(obj).reduce((acc, [ k, v ]) => {
    const newPath = `${path}${path ? '.' : ''}${k}`;
    return Object.assign(acc, v instanceof Object
      ? nestedToPlain(v, newPath)
      : { [newPath]: v }
    );
  }, {});


const plain = nestedToPlain(example, 'example');

или

const nestedToPlain = (obj, keys = []) =>
  Object.entries(obj).reduce((acc, [ k, v ]) => (
    keys.push(k),
    Object.assign(acc, v instanceof Object
      ? nestedToPlain(v, keys)
      : { [keys.join('.')]: v }
    ),
    keys.pop(),
    acc
  ), {});


const plain = nestedToPlain(example, [ 'example' ]);

Рекурсии нет:

const nestedToPlain = function(obj, keys = []) {
  const result = {};
  const [ push, pop ] = this;

  for (const stack = [ obj ]; stack.length;) {
    const n = stack.pop();
    if (n instanceof Object) {
      Object.entries(n).reverse().forEach(([ k, v ]) => stack.push(pop, v, k, push));
    } else if (n === push) {
      keys.push(stack.pop());
    } else if (n === pop) {
      keys.pop();
    } else {
      result[keys.join('.')] = n;
    }
  }

  return result;
}.bind([ Symbol(), Symbol() ]);


const plain = nestedToPlain(example, [ 'example' ]);

Неиспользование v-model чем-то мотивировано? - сейчас всё выглядит так, будто вы на ровном месте сами себе палки в колёса ставите. Всё же элементарно, например.

const newArr = arr
  .filter(function(n) {
    return !(this[n.country] = this.hasOwnProperty(n.country));
  }, {})
  .map((n, i) => ({ id: i + 1, country: n.country }));

или

const newArr = Object.values(arr.reduce((acc, { country }) => {
  acc[0][country] = acc[0][country] || { id: ++acc[1], country };
  return acc;
}, [ {}, 0 ])[0]);

или

const newArr = Array.from(arr.reduce((acc, { country: n }) => (
  acc.set(n, acc.get(n) || { id: -~acc.size, country: n })
), new Map).values());

Зачем хранить данные по всем объектам, если true может быть только один? - сделайте одно свойство, которое будет содержать имя активного объекта:

state = {
  active: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ active }) => ({
    active: active === name ? null : name,
  }));
}

<button onClick={this.toggle} data-name="collapse_1"></button>
<button onClick={this.toggle} data-name="collapse_2"></button>
<button onClick={this.toggle} data-name="collapse_3"></button>

Хранить всё - это для случая, когда одновременно активными могут быть несколько объектов:

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ collapse }) => ({
    collaple: {
      ...collapse,
      [name]: !collapse[name],
    },
  }));
}

const keys = [ 'firstName', 'lastName' ];
const values = document.querySelector('input').value.toLowerCase().match(/\S+/g) || [];
const result = arr.filter(n => keys.some(k => values.some(v => n[k].toLowerCase().includes(v))));

Перенесите вызов checkUserBd в componentDidMount.