v-show does not work in ref([]) in vue3

[KuangDaDa]

<template>
    <div>
        <Header></Header>
        <div class="row">
            <div class="col-8">
                <input type="text" class="form-control" placeholder="Enter item to add to shop" v-model="input">
            </div>
            <div class="col-4">
                <button class="btn btn-primary" @click="addItem">Add item</button>
            </div>
        </div>
        <div v-show="list"  class="py-4">
            <ul>
                <li v-for="(l,index) in list" :key="index" class="d-flex"><span class="w-75">{{l}}</span> <a href="#" class="d-block w-25 text-danger" @click="remove(l)">Delete</a></li>
            </ul>
            <button class="btn btn-danger py-2" @click="deleteAll">Delete All</button>
        </div>
    </div>
</template>

<script setup>
import Header from "./Header.vue"
import {ref} from 'vue'

let list = ref([]);
let input = ref("");

function addItem(){
    list.value.push(input.value)
    input.value=""
}

function remove(i){
   list.value = list.value.filter((text)=> text !== i);
}

function deleteAll(){
    list.value=[];
}
</script>

v-show does not work in my above, anyone could please give some suggestion.

[LinusBorg]

what is list? Like this?

const list = ref([])

if so, then:

<div v-show="list.length > 0"  class="py-4">