I have a custom column inside by user’s table called avail_balance. When making a transaction, I want the available balance to update on the frontened WITHOUT having to reload the page. So after an axios post, it will react properly and update the value.

Inside my AppLayout, towards the header section, I can view this value in the template with:

AppLayout.vue (main app layout)

<template>
   <div>
   {{ $page.props.auth.user.avail_balance }}
   </div>
</template>

Then inside one of my child components, it has a “submit transaction” axios call that post’s the necessary data and updates the user’s available balance in the backend database.

makeOrder.vue (child component)

<script setup>
import { ref } from 'vue';
import { usePage } from '@inertiajs/vue3';

const page = usePage();

function orderSubmit () {

     let data = ['300'];
   
    axios.post('/bets/store', {data}).then(res=>{
    page.props.auth.user.avail_balance.value = '300'; 


    }).catch(err => {
      if (err.response.status === 422) {        
        errors.value = err.response.data.errors;
        errors.message = err.response.data.errors.messages;     
       }

    })
    return;

}
</script>

I get an error that looks like:
TypeError: Cannot create property 'value'

After I make the order submit and it returns successful, I would like the available balance prop value to be updated on the AppLayout template portion WITHOUT having to refresh the webpage. The value updates correctly only if I manually refresh the page.

How can I go about this? Do I need to assign the $page.props.auth.user.avail_balance to a vue ref and then update the vue ref directly inside the axios post response?

TIA!