0xD34F

Вынести .zoom за пределы карты, добавить общую обёртку с относительным позиционированием:

<div class="map-wrapper">
  <div class="zoom">
    <div data-zoom="+1" class="zoom-in"></div>
    <div data-zoom="-1" class="zoom-out"></div>
  </div>
  <div class="map"></div>
</div>

.map-wrapper {
  position: relative;
}

Чтобы .zoom отображался поверх карты, задать ему z-index и абсолютное позиционирование:

.zoom {
  position: absolute;
  z-index: 666;
}

Добавить обработчик клика по кнопкам:

document.querySelector('.zoom').addEventListener('click', function(e) {
  const zoomChange = +e.target.dataset.zoom;
  if (zoomChange) {
    map.setZoom(map.getZoom() + zoomChange);
  }
});

https://jsfiddle.net/mu32azvy/

Нет гарантии, что к моменту монтирования вашего компонента 2GIS API будет загружен. Так что код, расположенный в mounted, следует обернуть в DG.then.

Что, не хочет добавляться обработчик? Видимо, такой возможности не предусмотрено в 2gis api. Давайте закостылим - добавим его нативными средствами. Ну, почти. Так как элемент popup'а создаётся при его первом открытии, понадобится однократно срабатывающий обработчик popupopen, в котором будет выполняться назначение обработчика dblclick.

Добавляете компоненту методы:

methods: {
  onPopupOpen(e) {
    e.target
      .getPopup()
      .getElement()
      .querySelector('.leaflet-popup-content-wrapper')
      .addEventListener('dblclick', this.onPopupDblClick);
  },
  onPopupDblClick(e) {
    const
      id = +e.currentTarget.querySelector('[data-id]').dataset.id,
      // теперь, зная id, можно найти соответствующий объект
    ...

А создаваемым маркерам обработчик:

.once('popupopen', this.onPopupOpen)

https://jsfiddle.net/3jz059mb/

[
  [ 55.03606, 82.91325 ],
  [ 55.03262, 82.91059 ],
  [ 55.03114, 82.90941 ],
].forEach(n => {
  DG.marker(n, { icon: myIcon })
    .addTo(map)
    .bindPopup(n.join(', '))
    .on('click', onMarkerClick);
});

function onMarkerClick(e) {
  console.log(e.target.getLatLng());
}

rcs.forEach((residential, i) => {
  ...
  /*
   * никакого this при создании попапов не надо - какой смысл делать свойством
   * компонента один из многих попапов (т.к. тут цикл, новая итерация - новый
   * попап, в результате будет сохранён последний созданный)?
   *
   * то же касается и координат маркера ниже
   */
  const popup = DG.popup({
  ...

  setTimeout(() => {
    DG.marker([ residential.latitude, residential.longitude ], { icon: myDivIcon })
      .addTo(this.markers)
      .bindPopup(popup);
  }, i * 200);
});

Делаете метод добавления маркеров, который перед добавлением будет удалять существующие маркеры. И ещё делаете watch на массив отфильтрованных данных, на основе которого маркеры создаются - там этот метод и вызываете. Например.

Или можно создать сразу все маркеры, в watcher'e обходить исходный массив данных, и помещать на карту/убирать с карты маркер в зависимости от того, присутствует ли текущее значение в отфильтрованном массиве - тоже вариант.

Не надо ничего понимать - this.map.closePopup().

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

А если открыты несколько попапов разных маркеров? <...> как можно открыть необходимый попап маркера (без нажатия на сам маркер конечно)

https://jsfiddle.net/Lmkbq54p/

Например. Уверен, можно сделать и более цивилизованно (это про отслеживание зума и про замену внутренностей маркера), но ковырять документацию как-то лень.

- e.originalEvent.target.getAttribute('data-id')
+ e.originalEvent.target.closest('[data-id]').dataset.id

UPD.

Это верстка шаблона маркера 2гис, отдельно навешивать на нее обработчики нельзя

"Верстка шаблона маркера" - в смысле, DG.divIcon? Да, туда нельзя. А на сам маркер - можно:

const marker = DG.marker(...
marker.on('click', onMarkerClick);

function onMarkerClick(e) {
  // ...
}

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

Я вообще сделал это чтобы как то понять на какой маркер кликнули

Ну да, вешайте обработчик клика на маркер, смотрите у события свойство target.

Или, возможен другой вариант. Как я понимаю, this.markers - это DG.featureGroup. Оставляете общий обработчик клика, смотрите у события свойство eventTargets, это массив, внутри будет кликнутый маркер.

Делаете метод изменения масштаба:

zoom(change) {
  this.map.setZoom(this.map.getZoom() + change);
},

И подключаете его в качестве обработчика клика к кнопкам:

<div @click="zoom(+1)">zoom in</div>
<div @click="zoom(-1)">zoom out</div>

Кнопкам назначаете абсолютное позиционирование, чтобы можно было над картой расположить. Ну и стилизуете их как-нибудь ещё, тут уже вам виднее. Например.

Инициализируйте vue по событию popupopen:

marker.on('popupopen', function(e) {
  new Vue({ el: e.popup._contentNode });
});

При первом вызове создавайте карту и маркер, делайте их свойствами компонента, при последующих вызовах обновляйте координаты:

if (!this.map) {
  this.map = DG.map(...);
  this.marker = DG.marker(...);
} else {
  this.map.panTo(...)
  this.marker.setLatLng(...);
}

https://jsfiddle.net/o04vc57k/