Typescript 我不明白使用打字脚本在模板中展开参考

I'm migrating some Vue3 code from javascript to typescript, and I just can't seem to understand what's going on with the unwrapping of a ref/computed value in the template.
It was my understanding that the template would always auto-unwrap reactive properties, but it doesn't seem to be the case anymore.

下面是我的代码:

<script setup lang="ts">
import { ref } from 'vue';

class BaseBlock {
  style = ref('color: black')
}

interface IRefBlockKey {
  [key: string]: BaseBlock;
}

let Block = new BaseBlock();
let refBlock = ref(new BaseBlock());
let refWithKeyBlock = ref({ myBlock: new BaseBlock() });
let refWithInterface = ref<IRefBlockKey>({ myBlock: new BaseBlock() });
</script>

<template>
  <div :style="Block.style">Error in IDE</div>
  <div :style="Block.style.value">No Error</div>
  <div :style="refBlock.style">No Error</div>
  <div :style="refWithKeyBlock['myBlock'].style">No Error (ok...?)</div>
  <div :style="refWithInterface['myBlock'].style">Error in IDE (why now!!)</div>
</template>

In both the first and the last div, I get an IDE error Type 'Ref<string>' is not assignable to type 'StyleValue | undefined'..
The first div not working is already making me feel very disoriented, but the last one is really a huge "???" for me.

谁能给我指个正确的方向，让我明白发生了什么事？