v-if not working for single File template - vue.js

Question

So I have the following Vue app
App.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:
'© 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>
Here is my Cancel.vue component
<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>
If I set the addNewMarker field to true, the Cancel component does not appear in the UI (even though I can see its being added in Vue component console)
However, if I use v-show instead of v-if, I can see the Cancel component showing on and off if I toggle the addNewMarker. Is there anything I should configure so that v-if works correctly for single file templates?
Here is a video demo showing v-if (not working) and v-show (working)