How to update data's variable in vuejs by a javascript variables

Question

I've been working with Vuejs these days and I have a problem that I don't figure out how to solve. This is my code :

 var vm = new Vue({ el: '#app', apolloProvider, data: { books: [], borrow_detail: [], latency: second }, render: h => h(App) })

I have a graphQL server and GraphQL Client and I want to calculate and put the response time in the GraphQL Client UI for researching.

I calculated the response time of my request successfully then update the "second" variable, then I think it will update the latency in my data that will change in my another component too. But my component just render the first value of "second" and it dont update when "second" is changed (I checked it by console.log).

How do I bind the javascript variable from main.js to Vuejs component ?

Answer 1

Although I'm not entirely sure how you are actually using latency with other components, you could try to make a computed property for it.

This will make sure that whenever you reference latency , it will return the latest value of the second variable. You can learn more about computed properties here: Vue Computed Properties

Eg

 var vm = new Vue({ el: '#app', apolloProvider, data: { books: [], borrow_detail: [] }, computed: { // A computed getter for latency latency: function() { return second; } }, render: h => h(App) })

Note: You can reference computed properties in the template just as you would regular data properties, ie Eg <h1>{{latency}}</h1>