Vue JS code is not updating inside a loop - vuejs2

Question

I'm stuck with a problem for a couple of days now and I've no idea what might be the solution. I've tried a couple, nothing worked.
I'm trying to enlarge a span text to fit the parent container width.
I've tried this.$forceUpdate();, didn't work.
I've also tried to pause the loop, but I found out later that that's not really possible in JS.
<template>
<span
ref="textRowRef"
v-bind:style="{fontSize: fontSize + 'px'}" >
{{ textRow }}</span>
</template>
// this is the VueJS code
var textRow = this.$refs.textRowRef;
var parentRow = textRow.parentElement;
for(var i = 0; i < 10; i++) {
this.fontSize += 10;
console.log(`Text Row in loop: ${textRow.clientWidth}`);
textRow = this.$refs.textRowRef;
}
console.log(`Text Row: ${textRow.clientWidth}`);
console.log(`Parent Row: ${parentRow.clientWidth}`);
Results in the console:
10 Text Row in loop: 48
Text Row: 48
Parent Row: 378

Answer 1

Here's my attempt.
I set fontSize to 72px then gradually reduce it by 1px until the text fits within the box. For such a simple example the performance is fine but I suspect that in the context of a larger page reducing it by 1px each time might prove too slow.
Each time the fontSize changes it triggers a re-render. The updated hook then measures the text to decide whether it needs to be shrunk even further.
If the text changes it resets the size to 72px and starts the process over again. I've not made any attempt to track the size of the parent element but it would also need to perform a reset if the width of that element changed.
I've added whitespace: nowrap to the <span> to ensure that its width will overflow the parent element. Otherwise the text would just wrap when the width reaches the edge of the parent element.
const MAX_FONT_SIZE = 72
new Vue({
el: '#app',
data () {
return {
fontSize: MAX_FONT_SIZE,
textRow: 'Initial value for the text'
}
},
watch: {
textRow: 'resetSize'
},
mounted () {
this.refreshSize()
},
updated () {
this.refreshSize()
},
methods: {
async refreshSize () {
await this.$nextTick()
const textRow = this.$refs.textRowRef
const parentRow = textRow.parentElement
if (textRow.offsetWidth > parentRow.clientWidth) {
this.fontSize = Math.max(8, this.fontSize - 1)
}
},
resetSize () {
if (this.fontSize === MAX_FONT_SIZE) {
this.refreshSize()
} else {
this.fontSize = MAX_FONT_SIZE
}
}
}
})
#app {
background: #ccc;
border: 1px solid #000;
margin: 20px;
width: 300px;
}
.text-span {
white-space: nowrap;
}
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
<span
ref="textRowRef"
class="text-span"
:style="{fontSize: fontSize + 'px'}"
>
{{ textRow }}
</span>
<br>
Edit: <input v-model="textRow">
</div>