SFC Playground: styles are loaded after mounting of the app component

[silentmantra]

Vue version

3.3.12

Link to minimal reproduction

Vue SFC Playground

Steps to reproduce

Load the SFC Playground link.

<script setup>

import { onMounted, ref } from 'vue'

const div = ref();
const log = ref();
onMounted(()=>{
  log.value.textContent = div.value.offsetWidth;
});
const showWidth = () => log.value.textContent = div.value.offsetWidth;
</script>

<template>
  <div ref="div"></div>
  <button @click="showWidth">Show width</button>
  <div ref="log"></div>
</template>

<style scoped>
div{
  width: 50vw;
}
</style>

What is expected?

The styles are applied before onMounted() so the styled DIV would have a proper width.

What is actually happening?

In onMounted() the mounted component is unstyled, leading to a wrong offsetWidth reading.

System Info

No response

Any additional comments?

No response

[Alfred-Skyblue]

This is an issue with the repl, and I have already fixed it in vuejs/repl#191

[silentmantra]

This is an issue with the repl, and I have already fixed it in vuejs/repl#191

how we can merge it?

[LinusBorg]

Closing this as it's being fixed in the repl.

The PR will be merged when we get to reviewing it. It's not a priority topic at this moment, as we are putting our attention on Vue 3.4 and 2.7.16 till EOY.