<template>
  <input type="range" v-bind:min="litersMin" v-bind:max="litersMax" v-model="liters" />
</template>

<script>
export default {
  data() {
    return {
      liters: 0,
      litersMin: 0,
      litersMax: 100
    }
  }
}
</script>

Переписал на ES6, думаю если вам интересна оптимизация, то и современный стиль вызовет интерес :)

window.addEventListener('load', () => {
  const toggle = document.querySelector('#js-toggle')
  const body = document.querySelector('#js-body')
  const nav = document.querySelector('#js-nav')
  const menuBg = document.querySelector('#js-menu-bg')
  const toggleNav = document.querySelector('#js-toggle-nav')
  
  const openCloseMenu = () => {
    toggle.classList.toggle('toggle--active')
    body.classList.toggle('body--overflow')
    nav.classList.toggle('header__nav--active')
    menuBg.classList.toggle('menu-bg--active')
  }

  for (const clickEl of [toggle, toggleNav, menuBg]) {
    clickEl.addEventListener('click', openCloseMenu)
  }
})

Нормальный ли прием с arrayElemOnClick ?

Вполне, у вас элементы по которым можно кликнуть, еще имеют смену класса при клике.
Без данного условия, можно создать специальный класс или data-attr, чтобы одним querySelectorAll найти все интерактивные элементы, и через цикл так-же добавить click.

Решение на jquery ибо он у вас подключен уже. Но не советовал бы его использовать. Решение от Владимир лучше будет

$(document).ready(function() {
    const url = document.location.href;
    var link = $('.tg-button > a');

    var href = 'https://ya.ru?';

    if(url.match(/utm_source=/)){
        href += '&utm_source=' + window.location.search.split('utm_source=')[1].split('&')[0];
    }

    if(url.match(/utm_medium=/)){
        href += '&utm_medium=' +  window.location.search.split('utm_medium=')[1].split('&')[0];
    }

    if(url.match(/utm_campaign=/)){
        href += '&utm_campaign=' + window.location.search.split('utm_campaign=')[1].split('&')[0];
    }

    link.attr('href',  href);
});