Vue.js computed property showing wrong data

I have a leaflet project and I am using a Vue computed property to show the coordinates of a layer. I am implementing functionality to edit the coordinates directly in the block that renders the original coordinates, as seen below: edit coordinates

The code that initially renders the coordinates (only the latitude) is presented below:

            centerPointLat: {
            get() {
                const latitudeToRenderInDOM = this.useDDM
                    ? this.DDMlat(this.currLeafletShapeCenterPoint.lat)
                    : this.currLeafletShapeCenterPoint.lat
                return latitudeToRenderInDOM
            },
            set(v) {
                if (this.useDDM) {
                    const ddm = this.DDfromDDM(v)
                    this.modifiedLatValid = !!ddm || ddm === 0
                    this.modifiedLat = ddm || this.modifiedLat
                } else {
                    this.modifiedLatValid = !!v || v === 0
                    this.modifiedLat = parseFloat(v)
                }
            },

The getter reads the prop "currLeafletShapeCenterPoint.lat" from the parent, and renders the coordinates. The setter changes the coordinates based on input from the user. The HTML-block which uses the centerPointLat as input is below.

<div v-if="!cancelChangePoints">
    <md-field>
        <label>Latitude</label>
        <md-input v-model="centerPointLat" style="text-align: right" />
        <span class="md-suffix" v-if="!useDDM">&deg;</span>
    </md-field>
</div>

After the user has pressed "edit coordinates" two new buttons are rendered, save and cancel, and the HTML input field is editable (disabled until edit coordinates as default). save and cancel buttons

So far so good. The user has now decided to change the input to i.e. 69.742215 but decides that this value is erroneous, and presses the "cancel" button. In this case, I want the original value to be displayed, and I have a second computed property to get the original value:

centerPointLatOriginal: {
                get() {
                    const latitudeToRenderInDOMOriginal = this.useDDM
                        ? this.DDMlat(this.currLeafletShapeCenterPoint.lat)
                        : this.currLeafletShapeCenterPoint.lat
                    return latitudeToRenderInDOMOriginal
                },
                set(v) {},
            },

And a second block that renders the original values after cancel has been pressed. HTML-code:

<div v-if="cancelChangePoints">
    <md-field>
        <label>Latitude original</label>
        <md-input v-model="centerPointLatOriginal" style="text-align: right" />
        <span class="md-suffix" v-if="!useDDM">&deg;</span>
    </md-field>
</div>

The two latest code blocks are more or less identical to the two first ones, the only change being whether cancelChangePoints is true or false, and cancelChangePoints is changed on the @click event associated with the cancel button.

The problem is that, although cancelChangePoints is true, and the latest HTML-block is rendered (which is also verifiable from reading the label, which is Latitude original), the changed value is rendered (69.742215), and NOT 67.742215, which should come from the computed property centerPointLatOriginal. What is also staggering is that when I use the Vue dev tools to investigate this element (original lat), the value is indeed 67.742215!

Has anyone experienced a similar behavior and have suggestions on how to fix this problem? I have aged 10 years trying to wrap my head around this.

Updated 2022-01-14 10:16:22Z by Hans-Kristian Norum Eidesen

Assigning a :key to the 2nd HTML-element solved the problem:

<div v-if="cancelChangePoints" :key="forceReRender">
    <md-field>
         <label>Latitude original</label>
         <md-input
          v-if="cancelChangePoints"
          v-model="centerPointLatOriginal"
          style="text-align: right"/>
        <span class="md-suffix" v-if="!useDDM">&deg;</span>
    </md-field>
</div>
Updated 2022-01-14 10:44:48Z by Hans-Kristian Norum Eidesen