vue.js doesn't update on mounted() hook - vue.js

Question

Edit : Solved, see answer.
So i'm new to vue.js and quasar so it is probably a rookie mistake about vue lifecycle hooks and vue reactivity.
I want to resize an element based on the browser's size. The height of this element is calculated using the height of other elements. I use $refs to get the other element's height and I capture the onResize() event launched by a quasar component.
This event is launched once when the page is loading, and my element's sizes are all 0 because I guess they are not rendered in the DOM yet. I have a method to refresh my calculated height, which I call when "onResize" event is captured, and also at the "mounted()" vue.js hook.
My problem is :
the first onResize() calls the method but all elements have 0px in height.
mounted() calls the method again and here all elements have their height calculated. The results are good, but it does not show on the display, see screenshot #1 : resize events and sizes logged in the console, note that the size is calculated twice, once on onResize() and once on mounted() . the one on mounted() has the good value but it does not show in the DOM.
after I resize the window once, then everything is ok and i don't have any problem anymore. (screenshots #2 (window mode) and #3 (fullscreen again))
My question is : why the height is not update in the DOM when mounted() hook is called even if it is calculated correctly ? (everything is in the same .vue file)
My code :
My problem is with the height of the div that has the "tableRow" ref
<template>
<q-page>
<div class="row" :style="'height: '+pageSize.height*0.95+'px;'">
<div class="col-6 q-pa-lg">
<div class="row" ref="actionsRow">
<div class="col-6 q-mb-sm">
<q-search hide-underline v-model="filter" />
</div>
<div class="col-6">
</div>
</div>
<div class="row" ref="tableHeaderRow">
<q-table class="col-12" :selection="selectionMode" :selected.sync="selectedRows" :data="templateTableData" :columns="templateColumns"
row-key="slug" :pagination.sync="pagination" dense hide-bottom>
<q-tr slot="body" slot-scope="props" :props="props">
</q-tr>
</q-table>
</div>
<div class="row" ref="tableRow" :style="'height: '+tableHeight+'px;'">
<q-scroll-area style="height: 100%" class="col-12 q-mt-sm shadow-3">
<q-table :selection="selectionMode" :selected.sync="selectedRows" :data="templateTableData" :columns="templateColumns" row-key="slug"
:filter="filter" :pagination.sync="pagination" dense hide-bottom hide-header>
<q-tr slot="body" slot-scope="props" :props="props" #click.native="onRowClick(props.row)" class="cursor-pointer">
<q-td auto-width>
<q-checkbox color="primary" v-model="props.selected" />
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
{{ col.value }}
</q-td>
</q-tr>
</q-table>
</q-scroll-area>
</div>
</div>
<router-view class="col-6 q-pa-lg">
</router-view>
</div>
<q-window-resize-observable #resize="onResize" />
</q-page>
</template>
Script:
var data = []
for (var i = 1; i <= 100; i++) {
data.push({
id: i,
name: 'Template ' + i,
slug: 'template' + i,
active: true
})
}
import { mapActions, mapGetters } from 'vuex'
export default {
data: () => ({
pageSize: {
height: 0,
width: 0
},
tableHeight: 0,
templateColumns: [
{
name: 'templateName',
required: true,
label: 'Name',
align: 'left',
field: 'name',
sortable: true
},
{
name: 'templateSlug',
label: 'Slug',
align: 'left',
field: 'slug',
sortable: true
},
{
name: 'templateActive',
label: 'Active',
align: 'left',
field: 'active',
sortable: true,
sort: (a, b) => {
if ((a && b) || (!a && !b)) {
return 0
} else if (a) {
return 1
} else {
return -1
}
}
}
],
selectionMode: 'multiple',
selectedRows: [],
pagination: {
sortBy: null, // String, column "name" property value
descending: false,
page: 1,
rowsPerPage: 0 // current rows per page being displayed
},
templateTableData: data,
filter: ''
}),
computed: {
...mapGetters('appUtils', [
'getPageTitle',
'allConst'
])
},
methods: {
...mapActions('appUtils', [
'setPageTitle',
'deletePageTitle'
]),
onResize (size) {
this.pageSize.height = size.height - this.getPageTitle.height
this.resizeTable()
console.log('ON RESIZE EVENT:')
console.log('tableHeaderRow:'+
this.$refs.tableHeaderRow.clientHeight)
console.log('actionsRow:' + this.$refs.actionsRow.clientHeight)
console.log('table:' + this.tableHeight)
},
onRowClick (row) {
this.$router.push('/templates/' + row.slug)
},
resizeTable () {
this.tableHeight = this.pageSize.height - this.$refs.actionsRow.clientHeight -
this.$refs.tableHeaderRow.clientHeight - this.getPageTitle.height -
this.allConst.templatePageHeaderMargins
}
},
mounted () {
console.log('MOUNT TEMPLATES')
this.setPageTitle({ text: 'Manage templates', height: this.allConst.titleHeight })
this.resizeTable()
console.log('tableHeaderRow:' + this.$refs.tableHeaderRow.clientHeight)
console.log('actionsRow:' + this.$refs.actionsRow.clientHeight)
console.log('table:' + this.tableHeight)
},
destroyed () {
console.log('DESTROY TEMPLATES')
this.deletePageTitle()
}
}

Answer 1

Another one of my variables (titleSize) was 0, like the other sizes, during the first onResize() event, and I did not take that into account to correct it during the mounted() Hook.