How to sync vue.js data to global javscript variable

i currently work on an application with three.js and vue.js.

When i click on the 3d model a function gets triggered where the name of the clicked part of the model is set in the variable “name” which then should be rendered by vue.js.

On pageload the inital value of “name” in this example HELLO gets rendered. But when i click on the model the variable “name” gets updated but not the data variable “property” in vue.js.

How do i get reactivity to this example?

Greatful for every hint!

Javascript Part

var name = "HELLO". //defined as global variable


[...]

// Handling of click event in three.js

if (intersects.length > 0) {for(i = 1; i <= 6; i++) {
   if(intersects[ 0 ].object.name == 'K' + i ) { 
       //functions for specific parts are wrapped in an object to enable function call based on variable 'i'
      foo['K_' + i]('K' + i);         
}}

var foo = {
    K_1: function(i) {
         name = "foo_ " + i;
    },

    K_2: function() {},
    ...
}

vue.js Part

const app = Vue.createApp ({
    data() {
        return {
            property: name // object key "property" is set to var "name"
        }
    },

template: 
    `<h1> {{ property }} </h1>`
})

app.mount('#app')