How do I get my inline editing Vue component to update the value after editing?

I’m working on a simple inline editing component for a project, and have it mostly working, except that once the edit happens, the bound variable doesn’t update the way I’d like it.

The basic approach is that I have a table cell that just has the variable text, and then on double-click I swap in an input field populated with the text value.

Why is the computedCellValue not getting the updated value of the input when it gets edited?

<script setup>
    import { defineProps, ref, computed, nextTick } from 'vue';

    const props = defineProps([
        "cellValue",
        "prefix",
        "postfix"
    ]);

    const isEditing = ref(false);
    const inputField = ref(null);
    const computedCellValue = computed(() => props.cellValue);

    function toggleEditOn() {
        isEditing.value = true;

        nextTick(function () {
            inputField.value.focus();
            inputField.value.select();
        });
    }

    function toggleEditOff() {
        isEditing.value = false;
    }
</script>

<template>
    <td class="w-64 mx-1" @dblclick="toggleEditOn()" v-show="isEditing == false">
        {{ props.prefix }}{{ computedCellValue }}{{ props.postfix }}
    </td>
    <td class="w-64 mx-1" v-show="isEditing == true">
        {{ props.prefix }}<input class="w-64 bg-slate-400 p-1 text-white" ref="inputField" type="text" :value="computedCellValue"  @blur="toggleEditOff()" @focus="focused" @keyup.enter="toggleEditOff()">{{ props.postfix }}
    </td>
</template>