Vue Apollo - best practice for responding to query data once received

Question

I have a table component in my application that I would like the auto adjust its height based on a calculation (window height - (menuHeight + footerHeight). The menuHeight is local data in my apollo cache, requiring a query to receive inside my table component. This calculation needs to be ran in 2 cases:

1. When the apollo data is received
2. Any time the window height changes

I need help determining the best approach to satisfy both. A computed property satisfies the first but does not update as the window height change(img 1), and using methods and event listeners (img 2) to update works for the second case but I dont know how to run this once the apollo data is received or changes, as i cant just run the method in the mounted or beforeUpdate lifecycles.

Answer 1

You can use watch (see the Vue docs here):

watch: {
  ui(newValue, oldValue) {
    resizeTableHeight() // or whatever...
  }
}