Watch height of an element in VueJS
You could use the ResizeObserver and integrate it into your Vue-Component
function observeHeight() { const resizeObserver = new ResizeObserver(function() { console.log("Size changed"); }); resizeObserver.observe(document.getElementById('yourId'));}function changeHeight() { var elem = document.getElementById('yourId'); console.log('...loading data...') setTimeout(function(){ elem.style = "height: 200px"; }, 3000); }observeHeight();changeHeight();#yourId { background-color: beige; height: 100px;}<div id="yourId"> </div>
You can get the height with $ref.yourElement.clientHeight, after the search result returns the data. With that, you can set the height as part of your data{} section, and from there apply a watcher. Check this example
new Vue({ el: '#app', data: { height: 0 }, methods: { calculateHeight() { this.height = this.$refs.app.clientHeight; } }});