0xD34F

Делаете у компонента параметр, отвечающий за раскрытость списка. При необходимости список открыть делаете 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',
}),

:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]"

infoItem.fadeClass - таких имён свойств не бывает (то есть бывает, но так их задать нельзя, нужны кавычки)

наверное, имелось в виду [infoItem.fadeClass]

Можно добавить key, чтобы компонент рендерился заново. Типа так.

:to="{ path: '/field_of_activity', props: { messageId: 1}}"

Что-то вы тут напутали. Параметры передаются уж точно не через свойство props - оно используется в описании маршрутов.

Если хотите через path, тогда заменяете props на query (или прямо в path добавляете нужные параметры), а в описании соответствующего маршрута указываете что-то вроде props: route => ({ ...route.query }).

Или можно сделать маршрут именованным, тогда path меняете на name с соответствующим значением, а props на params.

Если хотите, чтобы поддерживались оба варианта, тогда в описании маршрута (помимо добавления имени) будет примерно так:

props: route => ({ ...route.query, ...route.params })

UPD. Вот вам демка, как это всё может выглядеть.

при выборе меньше 100 кнопка submit (отправка формы) не появлялась либо не была активна?

<button :disabled="notAllGoalsAchieved">submit</button>

methods: {
  notAchieved(goal) {
    return goal.tasks.reduce((acc, n) => acc + n.value, 0) !== 100;
  },
},
computed: {
  notAllGoalsAchieved() {
    return this.goals.some(this.notAchieved);
  },
},

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

Там, где выводятся имена целей, добавляете что-то вроде

<span v-show="notAchieved(g)">не достигнута</span>