В чем разница между асинхронным и статичным импортом в vue3?

Question

[Александр]

У меня есть компонент, который импортируется асинхронно через defineAsyncComponent
Я подготовил пример, нужно грузить приложение на ширине > 760 и сразу уменьшить ширину экрана < 760, после этого на клиенте мы увидим, что в шаблоне текущее значение ширины будет корректным, но стилей у компонента не будет

<template>
    <div :style="windowSize.width < 760 ? 'border: 1px solid red' : ''">
        window size: {{ windowSize }}
    </div>
</template>

Если уже на клиенте изменять ширину экрана, то стили будут отображаться согласно условию

Если я в своем примере сделаю статичный импорт таких проблем не будет

import AsyncComp from '../components/AsyncComp.vue'

В чем разница между асинхронным и статичным импортом? Почему это так работает?

https://codesandbox.io/p/devbox/bitter-rgb-mtk2q8