How come I can’t seem to use the model value in a component (using defineModel() as an iterator with v-for?

In other words, this will NOT work (pushing to list does not do anything):

<template>
  <button @click="() => list.push('test')">Add an item!</button>
  <ul>
    <li v-for="x in list">
      {{x}}
    </li>
  <ul>
</template>
<script setup>
const list = defineModel({type: Array, default: []})
</script>

…whereas this will work:

<template>
  <button @click="() => list.push('test')">Add an item!</button>
  <ul>
    <li v-for="x in list">
      {{x}}
    </li>
  <ul>
</template>
<script setup>
const list = ref([])
</script>

I’m on Vue 3.4.

A workaround is to watch a component-internal variable, and update the model value on changes, but that feels like an awkward hack… I’d like to understand what prevents me from using the model value as an iterator directly