I’m trying to implement simple SPA without Vue build and CLI, CDN scripts only.

The goal is to GET data by intervals in the background, then use the same live data set troughout the app, e.g. show the data at “Dashboard” screen with live updates (without reloading the page).

Code is the following:

• index.js:

const Home = { template: '<div><h1>Home</h1><p>This is home page</p></div>' }

const routes = [
    { path: '/', component: Home },
    { path: '/dash', component: Dash, name: 'dashboard', props: true}
]

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes, 
})

const { createApp } = Vue

var appdata = {}; // "global" application data here

const app = Vue.createApp({
    el: '#example',

    data: function () {
        return appdata;
    },

    methods: {
        updateData: async function(){
            fetch("http://127.0.0.1/ajaxget.php")
            .then(response => response.json())

            .then(result => {
                appdata = result;
                console.log(appdata)
            })
            ;
        }
        
    },

    mounted() {
        this.timer = setInterval(() => { this.updateData() }, 50)
        // this works just fine: data getter fires up and updates appdata
    },
    


})

app.use(router)
app.mount('#app')

• dash.vue.js:

var Dash = { 
    // props: ['data'], // this doesn't help
    // as well as referencing variable as {{ $root.data }}
    template: 
    "<div><h1>Dash</h1><p>This is dash page</p><div id='example'> {{ data }} </div></div>",
};

Getting data and routing works just fine, but appdata doesn’t seem to bind neither update.

How to implement such behaviour in Vue?

Thanks!