Variable doesn't update unless I open dev tools

This only recently became an issue and I haven’t made many changes compared to what is in production now.

I have two buttons that show depending on a variable via a v-if tag. If the variable is false, then one button shows, if true, the other.

The bool variable is only updating when I open dev tools in chrome…I have no idea why this is.

VIDEO: https://i.gyazo.com/95a90354fdcec849cc7e33aaa5e1d8b9.mp4

Screenshot of the last frame: https://gyazo.com/ecc0cbfbc01cf6f472cea48c6cc89a4a

Button Code

                            <div class="form-row float-right">
                            <button v-if="btnDisabled" class="btn btn-success" disabled style="margin-top: 25px;">
                                Save
                            </button>
                            <button v-else class="btn btn-success" style="margin-top: 25px;"
                                    v-on:click="createAlert()">
                                Alert me when {{desiredPriceComputed}}
                            </button>
                        </div>

Some of my data variables…

            btnDisabled: true,
            inputInvalid: false,
            hideProduct: false,
            hidePriceForm: false,
            busy: false,

Function for desiredPriceComputed (where the button variable to change from true to false.

 desiredPriceComputed: function () {
                let input = this.desiredPriceInput;
                let pInput = parseFloat(this.desiredPriceInput);

                if (input == "") {
                    this.inputInvalid = false;
                    this.btnDisabled = true;
                    this.cardAlert.desiredPrice = 0;
                    return '';
                }
                if (Number.isNaN(pInput)) {
                    this.inputInvalid = true;
                    this.btnDisabled = true;
                    this.cardAlert.desiredPrice = 0;
                    return '';
                }
                if (pInput < 0) {
                    this.inputInvalid = true;
                    this.btnDisabled = true;
                    this.cardAlert.desiredPrice = 0;
                    return '';
                }
                if (pInput > 1000000000) {
                    this.inputInvalid = true;
                    this.btnDisabled = true;
                    this.cardAlert.desiredPrice = 0;
                    return '';
                }
                this.inputInvalid = false;
                this.btnDisabled = false;
                this.cardAlert.desiredPrice = pInput.toFixed(2);

                if (pInput > this.cardAlert.currentPrice) {
                    return '$' + pInput.toFixed(2) + " or higher";
                }
                else if (pInput < this.cardAlert.currentPrice) {
                    return '$' + pInput.toFixed(2) + " or lower";
                }
                else {
                    return '$' + pInput.toFixed(2);
                }
                
            }

Some other important notes

I use Vue single file components with ASP.NET MVC razor pages.

I am currently calling Vue via the below inside the header tag.

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

Someone on StackOverflow helped me figure this one out.

TL:DR: Computed properties wont actually be called if they aren’t reference in the initial DOM load