diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 56e12d0657..34fbfa2a45 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -5,18 +5,19 @@ interface Props {
   modelValue: number
 }
 
-const { modelValue: value } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', model: number): void
+}
+
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits<Emits>()
 
 const editEnabled = inject<boolean>('editEnabled')
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 onMounted(() => {
   root.value?.focus()
@@ -24,15 +25,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" type="number" />
-  <span v-else>{{ localState }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" type="number" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
 input {
-  outline: none;
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
+  @apply outline-none w-full h-full;
 }
 </style>