Learn Vue 3: Step By Step, Episode 21 - "Refactor to defineProps and defineEmits" - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/21

HomeView.vue

<script setup>
  import TabbableTextarea from "@/components/TabbableTextarea.vue";
  import { ref } from "vue";

  let comment = ref('initial textarea value');
</script>

<template>
  <main>
    <form>
      <TabbableTextarea v-model="comment" style="width: 100%; height: 300px;" />
    </form>
  </main>
</template>

TabbableTextarea.vue

<script setup>
defineProps({
  modelValue: String
});

let emit = defineEmits(['update:modelValue']);

function onTabPress(e) {
  let textarea = e.target;

  let val = textarea.value,
    start = textarea.selectionStart,
    end = textarea.selectionEnd;

  textarea.value = val.substring(0, start) + "\t" + val.substring(end);

  textarea.selectionStart = textarea.selectionEnd = start + 1;
}
</script>

<template>
  <textarea
    @keydown.tab.prevent="onTabPress"
    @keyup="emit('update:modelValue', $event.target.value)"
    v-text="modelValue" />
</template>

It is worth noting that @input is recommended over @keyup for this purpose to deal with mouse based events as well!