vue-js-toggle-button new value not being reflected after database query

Hi guys and thanks in advance for your time on this. I'm very new to Vue-js and I was wondering if you could help me understand where I'm being bone-headed.

I am trying to use a toggle-button that will activate-deactivate a certain component. I have done the database implementation stuff i.e. the change is reflected on the database side and other places just fine.

I clearly don't properly understand either the lifecycle or something else but my 'new' toggle value is not being picked up when read from the database: meaning I switch it from 'on' to 'off' and I see it in the database. When I come back to it the toggle is showing 'on'.

I added the code snippet:

<template>
    <div class="asset">
        <div class="loading" v-if="loading"></div>
        <div class="content" v-else>

            <b-row>
                <b-col cols="12" style="text-align: right;">
                    <toggle-button :width="70"
                                   :labels="{checked: 'Active', unchecked: 'Inactive'}"
                                   :value="activeStatus"
                                   @change="handleStatusChange"/>
                </b-col>
            </b-row>

            <h2><span>Asset</span> {{ asset.name }}</h2>
            ...
        </div>
       
    </div>

</template>

<script>
   
    import { ToggleButton } from 'vue-js-toggle-button';

    export default {
        name: "Asset",
        components: {
   
            ToggleButton
        },
        data() {
            return {
                assetId: 0,
                asset: null,

                activeStatus: true,
            };
        },

        methods: {

            getActiveStatus() {
                this.$http.get(`asset/${this.assetId}/status`)
                    .then((resp) => {
                        this.activeStatus = resp.bodyText;
                        
                        <!-- logging for testing only-->
                        this.$httpError("Retrieved ActiveStatus: " + this.activeStatus);
                    })
                    .catch((resp) => {
                        this.$httpError("Cannot retrieve active status");
                    });
            },
            
            handleStatusChange(event) {
                let newStatus = { activeStatus: event.value };
                this.$http.post(`asset/${this.assetId}/status`, newStatus).then(() => {

                    this.activeStatus = newStatus;
                }).catch((resp) => {
                    this.$httpError('Failed to update activeStatus', resp);
                });

            },

            loadAsset() {
                this.loading = true;
                this.$http
                    .get(`asset/${this.assetId}`)
                    .then((resp) => {
                        this.asset = resp.body;
                    })
                    .catch((resp) => {
                        this.$httpError("Failed to load asset", resp);
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },

        },

        created() {
            this.assetId = this.$route.params.id;
            this.getActiveStatus();
            this.loadAsset();
        },

    };
</script>

<style scoped>
    h2 span {
        font-size: 12px;
        display: block;
        text-transform: uppercase;
    }

    #dbButton,
    #dupButton {
        width: 30%;
    }

    #redspan {
        color: red;
    }

    #copyButton,
    #pasteButton {
        width: 10%;
    }
</style>