Ion-segment stopped working after Capacitor upgrade

Ionic Framework Ionic Vue
1

Anybody ever seen this happen? Segment control is not wanting to work right. None of the code changed, I just upgraded the ionic project for Capacitor 3. @ldebeasi know issue?

Still works on other views though. Really not sure what is happening. Code looks like this:

<ion-segment value="map" @ionChange="segmentChanged($event)">
	<ion-segment-button value="map">
		<ion-label>Map</ion-label>
	</ion-segment-button>
	<ion-segment-button value="details">
		<ion-label>Details</ion-label>
	</ion-segment-button>
</ion-segment>

<div id="map" v-if="view == 'map'">
	1
</div>

<div id="details" v-if="view == 'details'" class="ion-padding">
	2
</div>


segmentChanged(e) {
	this.view = e.detail.value;
}

Versions:

"@ionic/vue": "^5.6.9",
"@ionic/vue-router": "^5.6.9",
"@capacitor/android": "^3.0.1",
"@capacitor/core": "^3.0.1",
"@capacitor/ios": "^3.0.1",
"vue": "^3.0.4",
"vue-router": "^4.0.0-rc.6"
2

I am not having any issues with Capacitor 3. Only version differences are as follows:

"vue": "^3.1.1",
"vue-router": "^4.0.8"

Try changing value="map" in ion-segment to :value="view" and then default the value of view to map in your props or data.

3

Changing value=map to :value="view" fixed it! So strange that it works on other Vue pages and not others but either way, thank you! I will now attempt to update my vue and vue-router! Thanks again!