V-если не работает для одного шаблона файла

Question

Итак, у меня есть следующее Vue приложение

Приложение. vue

<template id="main-page">
  <v-ons-page>
    <l-map
      ref="map"
      v-if="showMap"
      :zoom="zoom"
      :center="center"
      :options="mapOptions"
      style="height: 100%"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
      @update:bounds="boundUpdate"
      @move="move"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-marker
        v-if="addNewMarker"
        :lat-lng="liveCenter"
      >
        <l-icon
          :icon-size="dynamicSize"
          :icon-anchor="dynamicAnchor"
          icon-url="https://cdn3.iconfinder.com/data/icons/metro-explorer/512/my_location-512.png"
        />
      </l-marker>
      <l-marker
        v-for="marker in markers"
        :key="marker.id"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :lat-lng.sync="marker.position"
        @click="alert(marker)"
      >
      </l-marker>
      <l-control class="example-custom-control"
      :position="'bottomright'">
        <img 
          @click="showAddMarkerSetup" 
          src="https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_plus-512.png"
          height="42" width="42"
          >

      </l-control>
    </l-map>
    <Cancel v-if="addNewMarker"/>
    <Ok v-if="addNewMarker"/>
  </v-ons-page>
</template>

<style>

.example-custom-control {
  background: #fff;
  padding: 0 0.5em;
  border: 1px solid #aaa;
  border-radius: 0.1em;
}



.ok {
  position: absolute;
  bottom: 20px;
  right: 30%;
  width: 100px;
  height: 50px;
  z-index:999;
  background: #000;
  color: white;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>

<script>
import { latLng } from "leaflet";
import { 
  LMap, 
  LTileLayer, 
  LMarker, 
  LControl,
  LIcon
} from "vue2-leaflet";
import Cancel from './components/add/Cancel'
import Ok from './components/add/Ok'

export default {
  name: "Example",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LControl,
    LIcon,
    Cancel,
    Ok
  },
  data() {
    return {
      zoom: 18,
      center: latLng(14.601205, 120.974780),
      url: 'https://api.test.goxhere.com/place-geoserver/geoserver/gwc/service/gmaps?layers=postgis:goxhere&zoom={z}&y={y}&x={x}&format=image/png',
      attribution:
        '&copy; GoXhere',
      withPopup: latLng(14.601205, 120.974780),
      withTooltip: latLng(14.601205, 120.974980),
      currentZoom: 11.5,
      currentCenter: latLng(14.5905, 120.9781),
      liveCenter: latLng(14.601205, 120.974780),
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5,
        zoomControl: false
      },
      showMap: true,
      markers: [],
      addNewMarker: false,
      dynamicSize: [32, 32],
      dynamicAnchor: [32, 32]
    };
  },
  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    },
    showLongText() {
      this.showParagraph = !this.showParagraph;
    },
    innerClick() {
      alert("Click!");
    },
    showAlert() {
      alert("Click!");
    },
    showAddMarkerSetup() {
      console.log('showAddMarkerSetup clicked')
      console.log('adding a marker at the center') 
      this.addNewMarker = !this.addNewMarker
    },
    boundUpdate() {
      console.log('bound update')
      // check if 
    },
    move(e) {
      console.log('map moving')
      if (this.addNewMarker) {
        this.liveCenter = e.target.getCenter()
      }
    }
  }
};
</script>

Вот мое Отмена. vue компонент

<template>
    <div class="cancel">Cancel</div>
</template>

<style scoped>
.cancel {
    position: absolute;
    bottom: 20px;
    left: 30%;
    width: 100px;
    height: 50px;
    z-index:999;
    background: #000;
    color: white;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<script>
export default {
    data() {
        return {
            "a": "sss"
        }
    },
    methods: {
        mounted() {
            console.log('mounted from cancel')
        }
    }
}
</script>

Если для поля addNewMarker установить значение true, компонент «Отмена» не появится в пользовательском интерфейсе (хотя я вижу, что он добавляется в консоль компонента Vue)

Однако, если я при использовании v-show вместо v-if компонент «Отмена» отображается включенным и выключенным, если я переключаю addNewMarker . Что-нибудь, что я должен настроить так, чтобы v-if работал правильно для шаблонов с одним файлом?

Вот демонстрация видео , показывающая v-if (не работает) и v-show (работает)