Vue component data between pages

Question

I have a Vue component, that I call in 2 pages, in which I am storing a variable I need to evaluate on the second page.

I am successfully setting the variable's value on the first page, but, on the next page, the value I set is lost.

I thought once you store variable in component data, it stays the same between pages, I don't know why the variable doesn't show up in Vue devtools, even though it is declared and initialized.

Any help is appreciated, and I can provide the resources you need if you need more.

Component code:

cartTotal = new Vue({
    el: '#totalPrices',
    data: {
        delivery_today : true,
        totalPrice : 0,
        minimalOrder : 0,
        totalPriceFormat : "",
        deliveryPriceFormated : "",
        delivery : true,
    },
    methods: {
        getItemsDelivery() {
            axios.get('/cart-getContent')
              .then(function (response) {
                  if (response.data.status) {
                      let foo = JSON.stringify(response.data.data);
                      let a = foo.replace(/"/g,'');
                      if (a.includes('delivers_today:0')) {
                          this.data.delivery_today = false;
                          console.log('tomorrow delivery');
                      }
                      else console.log('today delivery');
                  }
                  else notify(response.data.errMsg);
              })
        }
    }
})

First page HTML markup:

<div id="totalPrices" v-cloak>
    <div  class="card card-stats mb-4 mb-xl-0">
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <!--<h6 class="card-title text-uppercase text-muted mb-0">Sales Volume ( 30 days )</h6>
                    <span class="h5 font-weight-bold mb-0">SD</span>-->
                    <span v-if="totalPrice==0">{{ __('Cart is empty') }}!</span>

                    <span v-if="totalPrice"><strong>{{ __('Subtotal') }}:</strong></span>
                    <span v-if="totalPrice" class="amount"><strong>@{{ totalPriceFormat }}</strong></span>
                    <input hidden id="delivery_final_state" :value="delivery_today">
                </div>
            </div>
        </div>
    </div>
    <br/>
    <div v-if="totalPrice" v-cloak>
        <a href="/cart-checkout" v-on:click="getItemsDelivery()" class="btn btn-primary text-white">{{ __('Checkout') }}</a>
    </div>
</div>

Next page HTML markup:

<div id="totalPrices" v-cloak>
    <div class="card card-stats mb-4 mb-xl-0">
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <!--<h6 class="card-title text-uppercase text-muted mb-0">Sales Volume ( 30 days )</h6>
                    <span class="h5 font-weight-bold mb-0">SD</span>-->
                    <span v-if="totalPrice==0">{{ __('Cart is empty') }}!</span>
                    <span v-if="totalPrice"><strong>{{ __('Subtotal') }}:</strong></span>
                    <span v-if="totalPrice" class="amount"><strong>@{{ totalPriceFormat }}</strong></span>
                    <span v-if="totalPrice&&delivery"><br /><strong>{{ __('Delivery') }}:</strong></span>
                    <span v-if="totalPrice&&delivery" class="amount"><strong>@{{ deliveryPriceFormated }}</strong></span><br /><br />
                    <span v-if="totalPrice"><strong>{{ __('TOTAL') }}:</strong></span>
                    <span v-if="totalPrice" class="amount"><strong>@{{ withDeliveryFormat   }}</strong></span>
                    <input v-if="totalPrice" type="hidden" id="tootalPricewithDeliveryRaw" :value="withDelivery" />
                    <span v-if="delivery_today">Delivery For today</span>
                </div>
            </div>
        </div>
    </div>
</div>