0xD34F

vue.config.js:

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].minify.removeAttributeQuotes = false;
        return args;
      })
  }
};

Слушать событие dragend, выполнять обратное геокодирование:

<div>{{ address }}</div>
<div ref="map"></div>

data: () => ({
  coords: [ ... ],
  address: '',
}),
mounted() {
  ymaps.ready(() => {
    const map = new ymaps.Map(this.$refs.map, { ... });

    const marker = new ymaps.Placemark(this.coords, {}, {
      draggable: true,
    });

    marker.events.add('dragend', e => {
      this.coords = e.get('target').geometry.getCoordinates();
    });

    map.geoObjects.add(marker);

    this.$watch('coords', {
      immediate: true,
      handler(coords) {
        ymaps.geocode(coords).then(r => {
          this.address = r.geoObjects.get(0).properties.get('name');
        });
      },
    });
  });
},

Проблема в реактивности, при изменении текстов в инпуте, меняются старые записанные обьекты

Ну да, ну да. Вот так и получается: JS не учи, фреймворки используй.

Сохраняйте копию вместо оригинала. Типа так:

state.filter_list.push({ ...state.filter })

Это если объект плоский. Если есть вложенность, используйте _.cloneDeep, например (или какой-либо иной аналог, или сами можете попробовать реализовать рекурсивную функцию копирования).

Читаем документацию внимательнее.

Делаете у компонента параметр, отвечающий за раскрытость списка. При необходимости список открыть делаете emit. В родителе по событию устанавливаете индекс открытого компонента (он же и используется при передаче параметра открытости списка - проверяете, что равен индексу текущего экземпляра). Всё.

У вас маркеры дублируются - вы их добавляете по событию places_changed и повторно при построении polyline. Так что один вы удалили, а другой в том же месте (другие - дублируются многократно) остался.

Что конкретно следует предпринять:

1. Сделайте infowindow свойством компонента. Инициализируйте его там же где и саму карту.
   
2. Перенесите назначение обработчика клика маркера из updateMap в обработчик places_changed, туда, где маркер создаётся впервые. Должно получится как-то так:
   
   

   const marker = new google.maps.Marker({
     map: this.map,
     title: place.name,
     position: place.geometry.location,
   });
   google.maps.event.addListener(marker, 'click', () => {
     this.infowindow.setContent(marker.title);
     this.infowindow.open(this.map, marker);
   });
   this.markers.push(marker);

   
   
3. Сам метод updateMap должен сильно сократиться в размерах (да и имя ему сменить не помешает - на updatePolyline, например):
   
   

   updateMap() {
     if (this.polyline) {
       this.polyline.setMap(null);
     }
   
     this.polyline = new google.maps.Polyline({
       path: this.markers.map(n => n.getPosition()),
       geodesic: true,
       strokeColor: '#FF0000',
       strokeOpacity: 1.0,
       strokeWeight: 2,
       map: this.map,
     });
   },

   
   
4. Что касается работы с элементами DOM-дерева:
   
   

   document.getElementById('map')
   <...>
   document.getElementById('inputPlace')

   
   Так дела не делаются. Стоит переписать с использованием ref.
   

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

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));
    },
  },
},

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

Создаёте вручную экземпляр, вручную же добавляете его $el в DOM-дерево, и так же вручную удаляете.
Alert, например. А вот confirm.

data: () => ({
  options: [
    { value:  69, text:  'hello, world!!' },
    { value: 187, text:  'fuck the world' },
    { value: 666, text: 'fuck everything' },
  ],
  value: null,
}),
computed: {
  selectedText() {
    return (this.options.find(n => n.value === this.value) || {}).text || '';
  },
},

<select v-model="value">
  <option v-for="n in options" :value="n.value">{{ n.text }}</option>
</select>
<div>
  Текст выбранной опции: <span>{{ selectedText }}</span> 
</div>

в итоге выводится не разница, а просто текущее значение показателя

Что, наверное, совсем неудивительно - не вижу, чтобы вы обновляли предыдущее значение после вычисления разницы. Оно у вас изначально нулевое, надо полагать - ну вот постоянно и вычисляете разницу с нулём.

А вообще, хранить предыдущее значение необходимости нет:

watch: {
  totalBuyQuantity(newVal, oldVal) {
    this.buyDiff = newVal - oldVal;
  },
},

пробовал использовать computed <...> если пользователь руками поменяет этот адрес, он все равно останется прежним

Добавьте сеттер:

email() {
  get() {
    return this.$store.state.user.email;
  },
  set(val) {
    // тут вызов мутации, которая поменяет значение в хранилище
  },
},

data: () => ({
  opened: null,
  blocks: [
    { id: 1, content: 'Я первый' },
    { id: 2, content: 'А я второй' },
    { id: 3, content: 'Третьим буду' },
  ],
}),

<a v-for="b in blocks" @click="opened = b">открыть {{ b.id }} блок</a>

<div v-if="opened" :class="`block-${opened.id}`">
  <a @click="opened = null">Скрыть блок</a>
  <div class="content">{{ opened.content }}</div>
</div>

@click="product.quantity = Math.max(0, product.quantity - 1)"

Вместо computed свойства сделайте фильтр:

filters: {
  price: val => val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ").replace('.', ','),
},

Соответственно, в шаблоне будет:

td {{ product.price | price }}

UPD. Кстати, раз уж вы выводите цены - можно вместо плясок с регулярными выражениями форматировать значение средствами функции toLocaleString, она умеет работать с деньгами, будет как-то так:

price: val => val.toLocaleString('ru', {
  style: 'currency',
  currency: 'RUB',
}),