Vuejs uppercase custom directive not working

I’ve built the following directive to transform an input’s v-model into uppercase:

app.directive('uppercase', (el) => {
  el.value = el.value.toUpperCase()
})

But when I apply it, the resulting v-model returns the input value with the last character in lowercase.

  <template>
  <div>
    <input type="text" v-uppercase v-model="testInput" />
    <div>
      {{ testInput }}
    </div>
  </div>
    </template>
    
    <script setup>
      import { ref } from 'vue'
      const testInput = ref('')
    </script>

Why is this not working?